CSS3干货4：CSS中3D运用

这个假期，一直窝在屋里写东西，写的要奔溃了。写个博文，就当散心了~ T..T

3D功能，是CSS3增加的非常有意思的东西。当然，绝对不可能是真3D，CSS3只是模拟3D的视觉效果。

要玩转css3的3d，就必须了解几个词汇：3D坐标系，透视(perspective)、变换(transform)、旋转(rotate)和位移(translate)。

首先要理解3D坐标系。

X横坐标，Y纵坐标，Z垂直于屏幕的坐标。注意它们的正负方向，看图一秒就懂。

透视(perspective)

简单来讲，就是近大远小。能产生3D的视觉，很多时候就要靠这个透视。

变换(transform)、旋转(rotate)和位移(translate)

CSS中的3D变换，就靠它们了。具体看后面的例子。

几个关键样式

perspective: 500px;       透视距离。距离越大，透视越明显。个人觉得 500-600是最合适的。一般用在容器上。

transform-style: preserve-3d;   变换模式为3D。这个很重要，3D变换的父标签添加。它的作用是让子标签的变换 transform 为3D效果。

transform 样式。 这个样式就多了，这里不铺展开了。

举个例子：

用纯HTML+CSS做一个3D旋转切换的板块。

效果如图：

HTML结构：

<div class="box">
    <div class="d">
        <div class="d1">123</div>
        <div class="d2">123</div>
    </div>
</div>

CSS

.box{
    width: 500px;
    height: 500px;
    background: #f2f2f2;
    margin-left: auto;
    margin-right: auto;
    margin-top: 100px;
    perspective: 500px;  /*透视，让这个div形成一个透视的3D空间*/
    position: relative;  /*这个很重要。全部子板块都要绝对定位，保证标签能相互重叠*/
}
.d1,
.d2{
    text-align: center;
    line-height: 200px;
    font-size: 30px;
    color: #fff;
}
.d,
.d1,
.d2{
    width: 200px;
    height: 200px;
    position: absolute;   /*绝对定位，并把标签摆在正中间。*/
    left: 50%;
    top:50%;
    margin-left: -100px;
    margin-top: -100px;
}
.d{
    width: 200px;
    height: 200px;
    transform-style: preserve-3d; /*3D效果，让子标签的旋转的效果为3D。*/
    transition:all 0.5s;
    transform-origin: center center -100px; /*调整.d 的旋转中心：x y z*/
}
.d:hover{
    transform: rotateY(-90deg); /* 让整个.d 旋转 -90 度 */
}
.d1{
    background: #f00;
    /* d1 原地不动 */
}
.d2{
    background: #00f;
    transform:rotateY(90deg) translateZ(100px) translateX(100px);
    /*这个是侧面板块*/
    /*注意顺序，先旋转，再向前，向右移动*/
}

可以用来做导航的切换。这个网址，里就有用这个方式做的导航切换。

改下CSS，做一个3D的旋转

.box{
    width: 500px;
    height: 500px;
    background: #f2f2f2;
    margin-left: auto;
    margin-right: auto;
    margin-top: 100px;
    perspective: 500px;  /*透视，让这个div形成一个透视的3D空间*/
    position: relative;  /*这个很重要。全部子板块都要绝对定位，保证标签能相互重叠*/
}
.d1,
.d2{
    text-align: center;
    line-height: 200px;
    font-size: 30px;
    color: #fff;
}
.d,
.d1,
.d2{
    width: 200px;
    height: 200px;
    position: absolute;   /*绝对定位，并把标签摆在正中间。*/
    left: 50%;
    top:50%;
    margin-left: -100px;
    margin-top: -100px;
}
.d{
    width: 200px;
    height: 200px;
    transform-style: preserve-3d; /*3D效果，让子标签的旋转的效果为3D。*/
    transition:all 0.5s;
    animation: ani  10s linear infinite;  /*无限匀速旋转*/
}

.d1{
    background: #f00;
    transform: translateZ(100px);  /* 这个是正面板块。让d1，向前100px*/
}
.d2{
    background: #00f;
    transform:translateZ(-100px);  /* 这个是背面板块。让d2，向后100px*/
}
@keyframes ani {
    0%{
        transform:rotateY(0);
    }
    100%{
        transform:rotateY(360deg);
    }
}

腾讯qq浏览器，这个效果就是这样做哒。https://browser.qq.com/mac2.0/index.html