CSS3 3D盒子超简单制作

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

在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代码：（超鸡简单的布局）

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
        <div id="container">
            <div class="wrapper">
                <div class="item">
                    ![](http://upload-images.jianshu.io/upload_images/5350185-aea596f0ad4eead2.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
                    <span class="information">
                    <strong>澳门风云</strong>
                    闻名中外，曾担任美国赌场保安总顾问的魔术手石一坚，终回流澳门退休，更宴请各方朋友到来庆祝生日宴.
                    </span>
                </div>
            </div>

            <div class="wrapper">
                <div class="item">
                    ![](http://upload-images.jianshu.io/upload_images/5350185-2aaf4448f7e6f9eb.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
                    <span class="information">
                    <strong>改过迁善</strong>该剧讲述了金明民饰演的律师在失忆后回顾自己以往的所作所为心生忏悔，为弥补自己犯下的错误而与自己曾经工作过的律师事务所对簿公堂的故事。
                    </span>
                </div>
            </div>

        </div>
</body>
</html>

未写任何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) ;     
        }

CSS3 3D盒子超简单制作

推荐阅读更多精彩内容