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


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

 

平时看到动画下意识就觉得很难,出于畏惧心理老是不敢去碰,就像看到一个漂亮女生不敢上去搭讪,不过嘛,
再难得东西都是禁不住你死缠烂打的(追姑娘同理 哈哈哈。。)所以现在就从头理理,这个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

<div id="artical-detail">
        <div class="wrap-box">
            <div class="box-content">
                <div class="l-front"> <img src="https://images.cnblogs.com/cnblogs_com/loveliang/1832689/t_200821080537girl.jpg?a=1598578211361" alt="1"></div>
                <div class="l-left"> <img src="https://images.cnblogs.com/cnblogs_com/loveliang/1832689/t_200821080537girl.jpg?a=1598578211361" alt="1"></div>
                <div class="l-back"> <img src="https://images.cnblogs.com/cnblogs_com/loveliang/1832689/t_200821080537girl.jpg?a=1598578211361" alt="1"></div>
                <div class="l-right"> <img src="https://images.cnblogs.com/cnblogs_com/loveliang/1832689/t_200821080537girl.jpg?a=1598578211361" alt="1"></div>
                <div class="m-front"> <img src="https://images.cnblogs.com/cnblogs_com/loveliang/1832689/t_200821080537girl.jpg?a=1598578211361" alt="1"></div>
                <div class="m-left"> <img src="https://images.cnblogs.com/cnblogs_com/loveliang/1832689/t_200821080537girl.jpg?a=1598578211361" alt="1"></div>
                <div class="m-back"> <img src="https://images.cnblogs.com/cnblogs_com/loveliang/1832689/t_200821080537girl.jpg?a=1598578211361" alt="1"></div>
                <div class="m-right"> <img src="https://images.cnblogs.com/cnblogs_com/loveliang/1832689/t_200821080537girl.jpg?a=1598578211361" alt="1"></div>
                <div class="s-front"> <img src="https://images.cnblogs.com/cnblogs_com/loveliang/1832689/t_200821080537girl.jpg?a=1598578211361" alt="1"></div>
                <div class="s-left"> <img src="https://images.cnblogs.com/cnblogs_com/loveliang/1832689/t_200821080537girl.jpg?a=1598578211361" alt="1"></div>
                <div class="s-back"> <img src="https://images.cnblogs.com/cnblogs_com/loveliang/1832689/t_200821080537girl.jpg?a=1598578211361" alt="1"></div>
                <div class="s-right"> <img src="https://images.cnblogs.com/cnblogs_com/loveliang/1832689/t_200821080537girl.jpg?a=1598578211361" alt="1"></div>
            </div>
        </div>

css

<style>
    /*外部容器  */
    .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);
    }
</style>

  

打赏

免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2021 CODEPRJ.COM