正方体3d旋转动画

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .box {
            width: 500px;
            height: 500px;
            margin: 200px auto;
            position: relative;
            -webkit-perspective: 1500px;  /*  景深，有了它子元素才能产生3D效果 ,加上内核可以实现不同浏览器不同样式*/
        }

        ul {
            width: 500px;
            height: 500px;
            transform-style: preserve-3d;
            /* 规定指定元素的子元素的变换效果是位于3D空间，还是被平展于元素的2D空间 */
            transform: rotateX(-30deg) rotateY(30deg);
            /* 整体给一点角度比较容易看出立体感 */
            animation: 16s spin linear infinite;
        }

        li {
            width: 400px;
            height: 400px;
            list-style-type: none;
            /* 绝对定位,先让li标签重叠 */
            position: absolute;
        }

        ul li img {

            /* 图片和父盒子一样大 */

            width: 100%;

            height: 100%
        }
        /* 调整图片位置组成正方体，此时正方体正对着我们，给ul整体旋转一定角度，更容易看出立体感 */
        ul :nth-child(1){
            transform:rotateY(0deg) translateZ(200px);
        }
        ul :nth-child(2){
            transform: rotateY(-90deg) translateZ(200px);
        }
        ul :nth-child(3) {
            transform: rotateY(-180deg) translateZ(200px);
        }
        ul :nth-child(4){
            transform: rotateY(-270deg) translateZ(200px);
        }
        ul :nth-child(5){
            transform: rotatex(90deg) translateZ(200px);
        }
        ul :nth-child(6){
            transform: rotatex(90deg) translateZ(-200px);
        }
        
 @keyframes spin
        {
            from
            {
                transform: translateZ(-10em) rotateX(0) rotateY(0deg);
            }
 
            to
            {
                transform: translateZ(-10em) rotateX(360deg) rotateY(360deg);
            }
        }
    </style>
</head>

<body>
    <div class="box">
        <ul>
            <li>
                <img src="1.jpg">
            </li>
            <li>
                <img src="2.jpg">
            </li>
            <li>
                <img src="3.jpg">
            </li>
            <li>
                <img src="4.jpg">
            </li>
            <li>
                <img src="5.jpg">
            </li>
            <li>
                <img src="6.jpg">
            </li>
        </ul>
    </div>
    <script type="text/javascript">
    </script>
</body>

</html>
qq_42802170
发布了34 篇原创文章 · 获赞 1 · 访问量 1138
私信关注
正方体3d旋转动画

猜你喜欢
