RedSpite
纯css实现盒子 3D 旋转效果
平时看到动画下意识就觉得很难，出于畏惧心理老是不敢去碰，就像看到一个漂亮女生不敢上去搭讪(。。)。
拔过嘛，再难得东西都是禁不住你死缠烂打的（追姑娘同理 哈哈哈。。）所以现在就从头理理，这个3d效果究竟是怎么实现的。
IE不支持 transform-style: preserve-3d，真是很遗憾啊！
先来个预览：
首先，css里关于 3D 最基础的东西要拎出来认识一下 transform-style: preserve-3d, 使被转换的子元素保留其 3D 转换。其次是 perspective: 800px,元素距离视图的距离，以像素计。 也就是我们所说的能使容器具有透视效果的一个属性，值越大，它距离我们眼睛的距离就越近，反之同理。
这两个属性结合，就可以呈现出 3D 效果。
这个栗子里核心的属性还有一个，是 transform:translate。
首先是 transform:translateX(),translateX是元素在X轴上的偏移，正值是向右，负值向左。
接着是 transform:translateY(),translateY是元素在Y轴上的偏移，想象一个原地旋转的芭蕾舞者， 偏移的角度即是舞者旋转的角度。正值是顺时针角度偏移，负值是逆时针角度偏移。
最后是 transform:translateZ(),translateZ是元素在Z轴上的偏移，参照z-index值，正值是离屏幕越近， 反之亦然。
根据 translateX Y Z值的不同，即可形成盒子各面。 本次栗子正是利用该属性，给前后左右各面加上不同值形成了以上效果。
下面贴上核心代码
Html:
Css:
/*
外部容器
*/
.wrap-box{
width: 100%;
height: auto;
perspective: 800px;
}
/*
核心容器
*/
.box-content{
width: 200px;
height: 200px;
margin: 2em auto 10em;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
position: relative;
animation: rotate 10s infinite linear;
}
@keyframes rotate {
0%{ transform: rotateX(-10deg) rotateY(0deg) }
50%{ transform: rotateX(-10deg) rotateY(180deg) }
100%{ transform: rotateX(-10deg) rotateY(360deg) }
}
@-webkit-keyframes rotate {
0%{ -webkit-transform: rotateX(-10deg) rotateY(0deg) }
50%{ -webkit-transform: rotateX(-10deg) rotateY(180deg) }
100%{ -webkit-transform: rotateX(-10deg) 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);
}
结语：
越学习越觉得有志者事竟成，很多看起来很难的东西都是纸老虎，慢慢理解，一点一点吃透，当时觉得再大的困难都会变得没问题。 别输给自己。
2016.10.19
© RedSpite | 蜀ICP备16004270号