2021-11-16 html+css旋转立方体

最新推荐文章于 2024-09-09 20:45:20 发布

J20001011

最新推荐文章于 2024-09-09 20:45:20 发布

阅读量94

点赞数

文章标签： css html css3

本文链接：https://blog.csdn.net/J20001011/article/details/121359899

版权

1、定义关键帧动画

 @keyframes roll{
                from{
                    transform: rotateX(0) rotateY(0) rotateZ(0);
                }
                to{
                    transform: rotateX(360deg) rotateY(720deg) rotateZ(360deg);
                }
            }

2、添加3D动画效果

transform-style: preserve-3d;/*开启3D效果*/
                /*animation: 旋转立方体 执行时间 [动画延迟时间 动画运动曲线 运动次数 是否反向执行 是否保留最后一帧];*/
                animation: roll 8s linear infinite;/*3D效果默认关闭\infinite无限次执行、linear匀速*/

3、css样式


            *{
                margin:0;
                padding:0;
            }
            div{
                width:200px;
                height:200px;
                background—color:skyblue;
                line-height:200px;
                text-align:center;
                color:white;
                font-size:100px;
                position:absolute;
            }
            .wrap{
                padding:100px;
                background-color: transparent;
                transform-style: preserve-3d;/*开启3D效果*/
                /*animation: 旋转立方体 执行时间 [动画延迟时间 动画运动曲线 运动次数 是否反向执行 是否保留最后一帧];*/
                animation: roll 8s linear infinite;/*3D效果默认关闭\infinite无限次执行、linear匀速*/
            }
            .wrap div:nth-of-type(1){
                transform: rotateY(-90deg) translateZ(100px);
                background-image: url(1.jpg);
            }
            .wrap div:nth-of-type(2){
                transform: rotateY(90deg) translateZ(100px);
                background-image: url(2.jpg);
            }
            .wrap div:nth-of-type(3){
                transform: rotateX(90deg) translateZ(100px);
                background-image: url(3.jpg);
            }
            .wrap div:nth-of-type(4){
                transform: rotateX(-90deg) translateZ(100px);
                background-image: url(4.jpg);
            }
            .wrap div:nth-of-type(5){
                transform: translateZ(100px);
                background-image: url(5.jpg);
            }
            .wrap div:nth-of-type(6){
                transform: rotateX(180deg) translateZ(100px);
                background-image: url(6.jpg);
            }

注意旋转角度哦~

transform-style：preserve-3d /*打开3d动画效果*/

默认3d动画效果是关闭的，所以要将3d效果打开

4、html

<body>
        <div class="wrap">
            <!--左右-->
            <div></div>
            <div></div>
            <!--上下-->
            <div></div>
            <div></div>
            <!--前后-->
            <div></div>
            <div> </div>
        </div>
    </body>