这是我第一次在这里写文章，如果写得不好的话，请大家多多包涵一下。

在XX网学完CSS3之后，然后我懂了一个道理，XX网评论区域存在一个小明梗，这个梗是这样的：1+1=2, 2+2=4，问小明今年多少岁 = 。= 原因是XX网教的基础是非常的基础，一到实战就GG了。看完CCS3课程后，自己尝试手写一下3D盒子的切换，虽然不是很炫。但是为了来练练手，顺便检查一下自己的学习成果，写了一个超鸡简单的鼠标滑动到相对应的盒子，盒子就以3D模式来翻转。话不多说，一言不合就贴代码 = =

3D原理我是从这篇博文慢慢参透懂的http://blog.csdn.net/jimmysmith/article/details/70478066

大家可以去这里看看.

我要实现的总体效果如图：

1.png

2.png

3.png

4.png

html代码：(超鸡简单的布局)

Document

未写任何css是这样的：

1.png

写完Html代码，就到css代码了

我就写一些核心css代码吧

步骤一：先给item项父类设置3D舞台布景 perspective 的值，好像这样看起来好多，其实都是为了兼容其他浏览器而写的各种前缀

.wrapper {

width: 400px;

height: 200px;

display: inline-block;

margin-right: 20px;

perspective: 2000px;

-webkit-perspective:2000px;

-ms-perspective:2000px;

-moz-perspective:2000px;

-o-perspective:2000px;

}

步骤二：设置item的动画效果，即3D效果 transform-style: preserve-3d;

而且我们要在切换的时候有个过渡效果，所以要加上 transition: all 0.7s ease;

.item {

transform-style: preserve-3d;

-webkit-transform-style:preserve-3d;

-ms-transform-style:preserve-3d;

-moz-transform-style:preserve-3d;

-o-transform-style:preserve-3d;

transition: all 0.7s ease;

-webkit-transition: all 0.7s ease;

-ms-transition: all 0.7s ease;

-moz-transform: all 0.7s ease;

-o-transition: all 0.7s ease;

height: 200px;

box-shadow: #ddd 5px 5px;

}

步骤三：我们想把information 先隐藏起来，至于怎样隐藏呢？

不是用display:none哦，我们是做3D效果，所以就通过X/Y/Z轴这些来操作。又因为背景色要做成渐变的，所以就采用线性渐变 linear-gradient。

相信大家都知道rotate是css3动画旋转的属性，好，就用它，我们把information 的span沿x轴旋转-90度，即逆时针90度，rotateX(-90deg)，X轴旋转后，平面距离Z轴肯定有一段距离，如图6。所以我们要通过Z轴平移。因为我设置wrap,item为200px,所以平移一半100px,又因为item我设置了阴影有5px,所以再加上那5px，所以在Z轴平移了105px.translateZ(-105px),所以就可以得到图7那种静态效果。

6.png

.item .information {

display: block;

width: 400px;

height: 200px;

transform:rotateX(-90deg) translateZ(-105px);

-webkit-transform:rotateX(0deg) translateZ(100px);

-ms-transform:rotateX(-90deg) translateZ(-105px);

-moz-transform:rotateX(-90deg) translateZ(-105px);

-o-transform:rotateX(-90deg) translateZ(-105px);

background: linear-gradient(to top,#3bd1ed 0%,#69d8ed 25%,#9fe6f4 50%,#c1ebf4 75%,#daf9ff 100%);

-webkit-background: linear-gradient(to top,#3bd1ed 0%,#69d8ed 25%,#9fe6f4 50%,#c1ebf4 75%,#daf9ff 100%);

-ms-background: linear-gradient(to top,#3bd1ed 0%,#69d8ed 25%,#9fe6f4 50%,#c1ebf4 75%,#daf9ff 100%);

-moz-background: linear-gradient(to top,#3bd1ed 0%,#69d8ed 25%,#9fe6f4 50%,#c1ebf4 75%,#daf9ff 100%);

-o-background: linear-gradient(to top,#3bd1ed 0%,#69d8ed 25%,#9fe6f4 50%,#c1ebf4 75%,#daf9ff 100%);

}

7.png

好了，这看起来好丑，下面看起来有凸出来的部分，其实这是因为图片现在正在 .information 的正中间，所以要把图片向Z轴正方向平移100px,如图8

.item img {

width: 400px;

height: 200px;

transform:rotateX(0deg) translateZ(100px);

-webkit-transform:rotateX(0deg) translateZ(100px);

-ms-transform:rotateX(0deg) translateZ(100px);

-moz-transform:rotateX(0deg) translateZ(100px);

-o-transform:rotateX(0deg) translateZ(100px);

}

8.png

好了，下面就是鼠标滑动事件了

鼠标一滑到Item上，图片要向上翻转，文字从下面出现，所以整个主体item要向正方向旋转90度， transform:rotateX(90deg) ，这简单的3D盒子切换就大功告成了，小弟水平有限，若有出错，望各位多多指点指点一下>. <

.item:hover {

box-shadow:none;

cursor:pointer;

transition: all 0.7s ease;

-webkit-transition: all 0.7s ease;

-ms-transition: all 0.7s ease;

-moz-transform: all 0.7s ease;

-o-transition: all 0.7s ease;

transform:rotateX(90deg) ;

-webkit-transform:rotateX(90deg);

-moz-transform:rotateX(90deg) ;

-o-transform:rotateX(90deg) ;

-ms-transform:rotateX(90deg) ;

}