回到顶部
我的头像

RedSpite

纯css实现盒子 3D 旋转效果

平时看到动画下意识就觉得很难,出于畏惧心理老是不敢去碰,就像看到一个漂亮女生不敢上去搭讪(。。)。

拔过嘛,再难得东西都是禁不住你死缠烂打的(追姑娘同理 哈哈哈。。)所以现在就从头理理,这个3d效果究竟是怎么实现的。

IE不支持 transform-style: preserve-3d,真是很遗憾啊!

先来个预览:

1
1
1
1
1
1
1
1
1
1
1
1

首先,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:
                    
1
1
1
1
1
1
1
1
1
1
1
1
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号