纯css样式实现盒子 3D 旋转、鼠标悬停效果

看到一个css3的动画效果，感觉很高大上的样子，心血来潮自己研究了一下。

先来个效果图：

下面来看这个3d效果究竟是怎么实现的。
（目前IE暂不支持 transform-style: preserve-3d。）
首先，用到的是 transform-style: preserve-3d, 使被转换的子元素保留其 3D 转换。其次是 perspective: 600px,元素距离视图的距离，以像素计。 能产生透视效果的一个属性，值越大，它距离我们眼睛的距离就越近。
transform-style: preserve-3d perspective: 600px这两个属性结合，就可以呈现出 3D 效果。

这里还用到的一个属性是transform:translate。

transform:translateX(),translateX是元素在X轴上的偏移，正值是向右，负值向左。
transform:translateY(),translateY是元素在Y轴上的偏移。正值是顺时针角度偏移，负值是逆时针角度偏移。
transform:translateZ(),translateZ是元素在Z轴上的偏移，正值是离屏幕越近， 负值离屏幕越远。

根据 translateX Y Z值的不同，即可形成盒子各面。

下面是核心代码
html：

<div class="wrap-box">
        <div class="box-content">
            <div class="l-front"> <img src="image/01.jpg" alt="1"></div>
            <div class="l-left"> <img src="image/02.jpg" alt="1"></div>
            <div class="l-back"> <img src="image/03.jpg" alt="1"></div>
            <div class="l-right"> <img src="image/04.jpg" alt="1"></div>
            <div class="m-front"> <img src="image/05.jpg" alt="1"></div>
            <div class="m-left"> <img src="image/06.jpg" alt="1"></div>
            <div class="m-back"> <img src="image/07.jpg" alt="1"></div>
            <div class="m-right"> <img src="image/08.jpg" alt="1"></div>
            <div class="s-front"> <img src="image/01.jpg" alt="1"></div>
            <div class="s-left"> <img src="image/02.jpg" alt="1"></div>
            <div class="s-back"> <img src="image/03.jpg" alt="1"></div>
            <div class="s-right"> <img src="image/04.jpg" alt="1"></div>
        </div>
    </div>

css样式：

/*
    外部容器
*/
.wrap-box{
    width: 100%;
    height: auto;
    perspective: 800px;
}
 /*
    核心容器
*/
.box-content{
    width: 200px;
    height: 200px;
    margin: 10em auto 10em;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    position: relative;
    animation: rotate 10s infinite linear;
}
@keyframes rotate {
    0%{ transform: rotateX(-20deg) rotateY(0deg) }
    50%{ transform: rotateX(-20deg) rotateY(180deg) }
    100%{ transform: rotateX(-20deg) rotateY(360deg) }
}
@-webkit-keyframes rotate {
    0%{ -webkit-transform: rotateX(-20deg) rotateY(0deg) }
    50%{ -webkit-transform: rotateX(-20deg) rotateY(180deg) }
    100%{ -webkit-transform: rotateX(-20deg) rotateY(360deg) }
}
.box-content img{
    width:100%;
}
.box-content div{
    position: absolute;
    transition: all 0.2s ease;
    left: 0;
}
 /*
    外层div
*/
.box-content div[class^="l"]{
    width: 200px;
    height: 200px;
    top:0;
}
 /*
    中间div
*/
.box-content div[class^="m"]{
    width: 150px;
    height: 150px;
    opacity: 0;
    top: 30px;
}
 /*
    内层div
*/
.box-content div[class^="s"]{
    width: 100px;
    height: 100px;
    opacity: 0;
    top: 50px;
}
.box-content:hover div[class^="l"]{
    top:0;
}
.box-content:hover div[class^="m"]{
    opacity: 1;
}
.box-content:hover div[class^="s"]{
    opacity: 1;
}
 /*
    前方元素
*/
.box-content div[class*="front"]{
    transform: translateZ(100px);
    -webkit-transform: translateZ(100px);
}
/*
    左边元素
*/
.box-content div[class*="left"]{
    transform: translateX(-100px) rotateY(-90deg);
    -webkit-transform: translateX(-100px) rotateY(-90deg);
}
/*
    后方元素
*/
.box-content div[class*="back"]{
    transform: translateZ(-100px);
    -webkit-transform: translateZ(-100px);
}
/*
    右边元素
*/
.box-content div[class*="right"]{
    transform: translateX(100px) rotateY(90deg);
    -webkit-transform: translateX(100px) rotateY(90deg);
}

.box-content:hover div.l-front{
    transform: translateZ(250px);
    -webkit-transform: translateZ(250px);
}
.box-content:hover div.m-front{
    transform: translateZ(150px);
    -webkit-transform: translateZ(150px);
}
.box-content:hover div.s-front{
    transform: translateZ(50px);
    -webkit-transform: translateZ(50px);
}
.box-content:hover div.l-left{
    transform: translateX(-250px) rotateY(-90deg);
    -webkit-transform: translateX(-250px) rotateY(-90deg);
}
.box-content:hover div.m-left{
    transform: translateX(-150px) rotateY(-90deg);
    -webkit-transform: translateX(-150px) rotateY(-90deg);
}
.box-content:hover div.s-left{
    transform: translateX(-50px) rotateY(-90deg);
    -webkit-transform: translateX(-50px) rotateY(-90deg);
}

.box-content:hover div.l-back{
    transform: translateZ(-250px);
    -webkit-transform: translateZ(-250px);
}
.box-content:hover div.m-back{
    transform: translateZ(-150px);
    -webkit-transform: translateZ(-150px);
}
.box-content:hover div.s-back{
    transform: translateZ(-50px);
    -webkit-transform: translateZ(-50px);
}

.box-content:hover div.l-right{
    transform: translateX(250px) rotateY(90deg);
    -webkit-transform: translateX(250px) rotateY(90deg);
}
.box-content:hover div.m-right{
    transform: translateX(150px) rotateY(90deg);
    -webkit-transform: translateX(150px) rotateY(90deg);
}
.box-content:hover div.s-right{
    transform: translateX(50px) rotateY(90deg);
    -webkit-transform: translateX(50px) rotateY(90deg);
}

看着很复杂，其实看懂了就觉得很简单的，慢慢学习吧。
知识掌握命运，学习成就未来！