本篇主要通过这个实践练习transform及3D旋转。

浏览器中，3D旋转时，主要看x轴、y轴、z轴的方向，旋转所绕的轴是一条横线，为x轴旋转，竖线，为y轴旋转，x和y轴都在显示器所在的平面上。z轴则垂直显示器所在的平面。

说到3D，必须提到的一个词：透视，也就是perspective，perspective属性定义3D元素距视图的距离，以像素计，定义观察者在z轴上与3D元素的距离（沿着z轴，与浏览器所在面垂直着，向前走，向后走…，越向前，值越小，越“靠近”3D元素，靠近到0时，看不见了！此刻元素在你脑后！越“远离”，值越大，大到一定程度时，也看不见了！此刻元素已经化身为一个点了…），与之配合的一个属性叫做perspective-origin，两个值，分别定义视角在x轴偏离的角度（从左边向右👉看？从正前方看？从右边向左👈看？）和在y轴偏离的角度（从上边👇俯视？从正前方看？从下边👆仰视？）。

html代码：

<div class="stage">
    <div class="wrapper">
        <img src="http://ww1.sinaimg.cn/large/854f1e58jw1exjhap4pg2j21jk1jku0x.jpg"/>
        <img src="http://ww3.sinaimg.cn/thumb180/854f1e58jw1f3adtzqrgvj21j01j0x26.jpg"/>
        <img src="http://tupian.aladd.net/2015/7/2748.jpg"/>
        <img src="http://ww3.sinaimg.cn/bmiddle/89f08a15gw1f3nc7unjq4j20k00k0dhd.jpg"/>
        <img src="http://tpic.home.news.cn/xhCloudNewsPic/xhpic1501/M04/0D/54/wKhTlFcr1i-EX9ZYAAAAAG2hseo834.jpg"/>
        <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcT7Mf-EWjUIFy77lI2zj2bOyTEcF78SS_AYMo6PfFWzYDQsa_9HEg"/>
    </div>
</div>

stage是整个3D旋转相册的舞台，wrapper是一组相册的包装元素。

css代码如下，stage需要设置perspective，wrapper要定义transform-style: preserve-3d。

对于img，首先通过absolute让一组元素重叠起来，然后分别设置旋转角度，六张图片，角度均匀分布的话，每个应该相差60度，此时六个图片仍然重叠在一起，只是各自面向不同的方位，接下来就是一个重要的设置：translateZ。

当元素面向浏览器（没有rotateX或者Y）时，translateZ的运动垂直于浏览器所在的平面，而设置了旋转之后，z轴会分别垂直于各个元素旋转之后所在的平面，因此，对于不同方向的img，translateZ相当于让它们像花儿开放一样，手拉手，背对背，分散开来～

<style>
    .stage {
        perspective: 800px;
        position: relative;
        height: 400px;
    }
    .wrapper {
        transform-style: preserve-3d;
        height: inherit;
    }
    .wrapper img {
        position: absolute;
        width: 108px;
        height: 108px;
        padding: 10px;
        background: #eee;
        left: 200px;
    }
    .wrapper img:nth-child(1) { transform: rotateY(   0deg ) translateZ(150px); }
    .wrapper img:nth-child(2) { transform: rotateY(  60deg ) translateZ(150px); }
    .wrapper img:nth-child(3) { transform: rotateY( 120deg ) translateZ(150px); }
    .wrapper img:nth-child(4) { transform: rotateY( 180deg ) translateZ(150px); }
    .wrapper img:nth-child(5) { transform: rotateY( 240deg ) translateZ(150px); }
    .wrapper img:nth-child(6) { transform: rotateY( 300deg ) translateZ(150px); }

    @keyframes rotatehaha {
        0% {transform: rotateY(0deg);}
        16% {transform: rotateY(60deg);}
        32% {transform: rotateY(120deg);}
        48% {transform: rotateY(180deg);}
        64% {transform: rotateY(240deg);}
        80% {transform: rotateY(300deg);}
    }
</style>

over。如果要旋转整个相册，给wrapper元素加上transform: rotateY(${num}deg)就可以。自动旋转的话，可以写个小动画：

.wrapper {
    transform-style: preserve-3d;
    height: inherit;
    animation: rotatehaha 10s infinite;
}

@keyframes rotatehaha {
    0% {transform: rotateY(0deg);}
    16% {transform: rotateY(60deg);}
    32% {transform: rotateY(120deg);}
    48% {transform: rotateY(180deg);}
    64% {transform: rotateY(240deg);}
    80% {transform: rotateY(300deg);}
}

对于上边设置的3D相关的属性，可以在浏览器审查元素中通过上下键改变值的大小，感受全方位360度的视角，加深理解…

阅读更多