#CSS变形特效

变形特效02
transform-3D
  三维坐标系：

1、transform-style
  该属性规定如何在3D空间中呈现被嵌套的元素（是子元素，而不是元素本身），它主要有两个值：

flat：（默认）表示所有子元素在2D平面呈现。
preserve-3d：表示所有子元素在3D空间中呈现。
  当“transform-style”的值为“preserve-3D”时更贴近我们现实中的思维，因为平时我们眼睛所看到的东西都是“3D（立体）”的，而当值为“flat”的时候，就相当于在纸上画画，无论画功再好，画出的东西都是平面的，只是由于透视和明暗关系，有的时候看起来“很立体”罢了。

<div class="wrap">
    <section class="t1">
        <span>Flat</span>
    </section>
    <section class="t2">
        <span>Preserve-3d</span>
    </section>
</div>

.wrap {
    text-align: center;
}
.wrap section {
    width:  160px;
    height: 160px;
    background-color: #000;
    margin: 30px;

    display: inline-block;
}

.wrap section > span {
    width:  inherit;
    height: inherit;

    cursor: pointer;

    background-color: orange;
    opacity: .75;

    color: #fff;
    font-size: 20px;
    letter-spacing: 2px;

    display: flex;
    justify-content: center;
    align-items: center;

    -webkit-transition: all .75s  linear;
    -moz-transition: all .75s linear;
    -ms-transition: all .75s linear;
    -o-transition: all .75s linear;
    transition: all .75s linear;

}

.wrap > section.t1 {
    /*2d场景*/
    transform-style: flat;
}

.wrap > section.t2 {
    /*3d场景*/
    transform-style: preserve-3d;
}

.wrap section > span:hover {
    -webkit-transform: rotateX(35deg) rotateY(45deg);
    -moz-transform: rotateX(35deg) rotateY(45deg);
    -ms-transform: rotateX(35deg) rotateY(45deg);
    -o-transform: rotateX(35deg) rotateY(45deg);
    transform: rotateX(35deg) rotateY(45deg);
}

2、perspective
  “perspective” 意为透视、视角，该属性定义3D元素距视图的距离（个人理解为景深），它只对转换为了3D模式的元素生效，单位为像素。

学美术或者学建筑的同学肯定接触过透视的一些东西：

不过，CSS3 3D transform中的透视的透视点与上面两张示例图是不同的：CSS3 3D transform的透视点是在浏览器的前方。或者这么理解吧：显示器中3D效果元素的透视点在显示器的上方（不是后面），近似就是我们眼睛所在方位。

比方说，一个1680像素宽的显示器中有张美女图片，应用了3D transform，同时，该元素或该元素父辈元素设置的“perspective”大小为2000像素。则这张美女呈现的3D效果就跟你本人在1.2个显示器宽度的地方(1680*1.2≈2000)看到的真实效果一致。

“perspective”属性有两种使用方式，一种是直接作为一个属性去使用，即“perspective:400”的形式；还有一种形式是作为“Transform”属性的值去使用，这个时候就需要加上单位了，即：“transform: perspective(400px)”。为了浏览器兼容，我们需加上浏览器前缀。

.stage {
    perspective: 600px;
}

.stage .box {
    transform: perspective(600px) rotateY(45deg);
}

我们可以通过 “translateZ” 寻找透视位置，如果说 rotateX / rotateY / rotateZ可以帮助理解三维坐标，则 translateZ则可以帮你理解透视位置。

我们都知道近大远小的道理，对于没有 rotateX 以及 rotateY 的元素，translateZ 的功能就是让元素在自己的眼前或近或远。比方说，我们设置元素 perspective 为201像素，如下：

perspective: 201px;
  则其子元素，设置的 translateZ值越小，则子元素大小越小（因为元素远去，我们眼睛看到的就会变小）；translateZ值越大，该元素也会越来越大，当translateZ值非常接近201像素，但是不超过201像素的时候（如200像素），该元素的大小就会撑满整个屏幕（如果父辈元素没有类似 overflow:hidden 的限制的话）。因为这个时候，子元素正好移到了你的眼睛前面，所谓“一叶蔽目，不见泰山”，就是这么回事。当 translateZ 值再变大，超过201像素的时候，该元素看不见了——这很好理解：我们是看不见眼睛后面的东西的！

再生动的文字描述也不如一个实例来得直观，我们可以直接看示例：

代码示例（你可以忽略代码）：

<form action="">
    <label>0</label>
    <input type="range" min="0" max="202" value="0" id="oRange">
    <label>202</label>
</form>
<div class="stage">
    <section class="box" id="box">translateZ：0</section>
</div>

form {
    text-align: center;
}
.stage {
    transform-style: preserve-3d;
    perspective: 201px;

    position: absolute;
    top:  50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

.stage .box {
    width:  120px;
    height: 50px;
    background-color: red;

    display: flex;
    justify-content: center;
    align-items: center;

}
var oRange    = document.getElementById('oRange');
var oBox      = document.getElementById('box');
var oShowArea = document.getElementById('show-area');
oRange.oninput = function () {
    oBox.textContent = 'translateZ：' + this.value;
    oBox.style.cssText = 'transform: translateZ(' + this.value + 'px);';
}

3、perspective-origin
  “perspective-origin” 这个属性超级好理解，表示你那双色迷迷的眼睛看的位置。默认就是所看舞台或元素的中心。有时候，我们对中心的位置是不感兴趣的，希望视线放在其他一些地方。比方说img：

一图胜千言，屌丝男们这个应该都懂的。下面为立方体的实际应用透视效果图：

perspective-origin: 20% 30%;

4、backface-visibility
  该属性定义当3D元素不面向屏幕时是否可见，该属性有两个值：

visible（默认）

表示当3D元素通过“rotate”属性旋转到元素“背部”时，元素仍然可见。

hidden

表示当3D元素通过“rotate”属性旋转到元素“背部”时，元素不可见。

在现实世界中，我们无法穿过软妹A看到其身后的软妹B或C或D；但是，在CSS3的3D世界中，默认情况下，我们是可以看到背后的元素。因此，为了切合实际，我们常常会这样设置，使后面元素不可见：

backface-visibility:hidden;

5、Transform-3d effect
1）、Cubic Box

<div class="cubic-box">
    <section class="face front">FRONT</section>
    <section class="face back">BACK</section>
    <section class="face left">LEFT</section>
    <section class="face right">RIGHT</section>
    <section class="face top">TOP</section>
    <section class="face bottom">BOTTOM</section>
</div>

.cubic-box {
    width:  160px;
    height: 160px;

    transform-style: preserve-3d;
    transform: rotateX(30deg) rotateY(30deg);

    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    margin: auto;
}
.cubic-box .face {
    width:  inherit;
    height: inherit;

    /*设置背面不可见*/
    backface-visibility: hidden;

    opacity: .75;

    /*设置文本样式*/
    color: #fff;
    font-size: 30px;
    letter-spacing: 2px;

    display: flex;
    justify-content: center;
    align-items: center;

    /*绝对定位，让所有的子元素全部重叠在一起*/
    position: absolute;
}

/*设置每一个面的背景颜色*/
.front  { background-color: red;   }
.back   { background-color: green; }
.left   { background-color: blue;  }
.right  { background-color: orange;}
.top    { background-color: purple;}
.bottom { background-color: black; }

/*布局每一个面*/
.front { transform: translateZ(80px);}
.back  { transform: rotateY(180deg) translateZ(80px);}
.left  { transform: rotateY(90deg) translateZ(80px);}
.right { transform: rotateY(-90deg) translateZ(80px);}
.top   { transform: rotateX(90deg) translateZ(80px);}
.bottom{ transform: rotateX(-90deg) translateZ(80px);}

我们来看一下演变过程，为了演示效果，我将设置 backface-visibility: visible;。

<div class="btn"></div>
<div class="cubic-box">
    <section class="face front">FRONT</section>
    <section class="face back">BACK</section>
    <section class="face left">LEFT</section>
    <section class="face right">RIGHT</section>
    <section class="face top">TOP</section>
    <section class="face bottom">BOTTOM</section>
</div>

.btn {
    width:  70px;
    height: 70px;
    border-radius: 50%;
    background-color: #000;

    text-align: center;
    line-height: 70px;

    cursor: pointer;

    margin: 110px auto;

    color: #fff;
    font-size: 16px;
    letter-spacing: 2px;
}

.cubic-box {
    width:  160px;
    height: 160px;

    transform-style: preserve-3d;
    transform: rotateX(30deg) rotateY(30deg);

    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    margin: auto;
}
.cubic-box .face {
    width:  inherit;
    height: inherit;

    /*设置背面不可见*/
    /*backface-visibility: hidden;*/

    opacity: .75;

    /*设置文本样式*/
    color: #fff;
    font-size: 30px;
    letter-spacing: 2px;

    display: flex;
    justify-content: center;
    align-items: center;

    /*绝对定位，让所有的子元素全部重叠在一起*/
    position: absolute;
}

/*设置每一个面的背景颜色*/
.front  { background-color: red;   transition: all 1s linear;}
.back   { background-color: green; transition: all 1s linear 1s;}
.left   { background-color: blue;  transition: all 1s linear 2s;}
.right  { background-color: orange;transition: all 1s linear 3s;}
.top    { background-color: purple;transition: all 1s linear 4s;}
.bottom { background-color: black; transition: all 1s linear 5s;}

/*布局每一个面*/
.btn:active + .cubic-box .front { transform: translateZ(80px);}
.btn:active + .cubic-box .back  { transform: rotateY(180deg) translateZ(80px);}
.btn:active + .cubic-box .left  { transform: rotateY(90deg) translateZ(80px);}
.btn:active + .cubic-box .right { transform: rotateY(-90deg) translateZ(80px);}
.btn:active + .cubic-box .top   { transform: rotateX(90deg) translateZ(80px);}
.btn:active + .cubic-box .bottom{ transform: rotateX(-90deg) translateZ(80px);}

/*动效设计*/
@keyframes shine {
    0%  { box-shadow: 0px 0px 5px  1px skyblue;}
    50% { box-shadow: 0px 0px 10px 7px lightgrey;}
    100%{ box-shadow: 0px 0px 5px  1px skyblue;}
}
.btn { transition: all 1s linear; }
.btn:active {
    transform: scale(.75, .75);
    animation: shine .5s linear infinite alternate;
}

3）、Carousel