css3 动画实现正方体旋转

古城微笑少年丶 2023-07-03 02:39 32阅读 0赞

成果图![在这里插入图片描述][20200131143828958.gif]  
这里的图片可以选择自己喜欢的图片放进去,这是基本的实现方式所以样式我写的很少.希望大家喜欢.

<style>
        body{ 
        	background-color: black;
        }
            .box{ 
                width:500px;
                height:500px;
                margin:100px auto;
                position: relative;
                /* perspective: 1600px; */
                /* background:bisque; */
                /* 3d风格显示 */
                transform-style: preserve-3d;
    			/* 为了方便观察，将整个正方体进行旋转 */
                 transform: rotateX(10deg) rotateY(10deg); 
    
                perspective-origin: 50% 50%;
                animation: run 5s linear infinite;
                    /* 里面可透视 */
                backface-visibility:visible;
            }
    
            @keyframes run{ 
                0%{ 
                    transform: rotateY(-30deg) rotateX(-30deg)   
                }
                100%{ 
                    transform: rotateY(360deg) rotateX(-30deg)  
                }
            }
    
            .box div{ 
                width:300px;
                height:300px;
                position: absolute;
                opacity: 0.45;
            }
    
            .top{ 
                transform: rotateX(90deg) translateZ(150px);
                background:url(01.jpg) no-repeat;
            }
    
            .right{ 
                transform: rotateY(90deg) translateZ(150px);
                background:url(02.jpg) no-repeat;
            }
    
            .bottom{ 
                transform: rotateX(-90deg) translateZ(150px);
                background:url(04.jpg) no-repeat;
            }
    
            .left{ 
                transform: rotateY(-90deg) translateZ(150px);
                background:url(06.jpg) no-repeat;
            }
    
            .front{ 
                transform: translateZ(150px);
                background:url(03.jpg)no-repeat;
            }
    
            .behind{ 
                transform: translateZ(-150px);
                background:url(05.jpg) no-repeat;
            }
        </style>
        <body>
        <div class="box">
            <div class="top"></div>
            <div class="right"></div>
            <div class="bottom"></div>
            <div class="left"></div>
            <div class="front"></div>
            <div class="behind"></div>
        </div>
    </body>

[20200131143828958.gif]: https://img-blog.csdnimg.cn/20200131143828958.gif

发表评论取消回复

表情：

评论列表（有 0 条评论，32人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS 3D动画大小可开合正方体

先看一下效果动态图 ![在这里插入图片描述][6e58a5c03afb4272b52045177603c497.gif_pic_center] 代码 HTML

淡淡的烟草味﹌/ 2023年10月03日 05:40/ 0 赞/ 18 阅读

相关 css3 动画实现正方体旋转

成果图![在这里插入图片描述][20200131143828958.gif] 这里的图片可以选择自己喜欢的图片放进去,这是基本的实现方式所以样式我写的很少.希望大家喜欢.

古城微笑少年丶/ 2023年07月03日 02:39/ 0 赞/ 33 阅读

相关前端学习日记：css3的3d变换制作旋转正方体(骰子)

<style> .box\{ width: 250px; height: 250px;

末蓝、/ 2023年06月06日 12:28/ 0 赞/ 26 阅读

相关 HTML5 纯CSS3实现正方体旋转3D效果

实现效果： ![20201127184938505.gif][] 实现代码： <!DOCTYPE html> <html> <head>

Love The Way You Lie/ 2022年12月24日 10:50/ 0 赞/ 277 阅读

相关 CSS3 元素转圈动画（元素旋转动画）

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

谁践踏了优雅/ 2022年11月10日 01:25/ 0 赞/ 220 阅读

相关 CSS正方体旋转

![正方体旋转][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JCn5pu1IOS4tg_si

怼烎@/ 2022年09月11日 14:25/ 0 赞/ 195 阅读

相关 css3图片旋转动画

参考网站：[http://www.17sucai.com/pins/tag/6188.html][http_www.17sucai.com_pins_tag_6188.html

妖狐艹你老母/ 2022年06月13日 13:47/ 0 赞/ 325 阅读

相关 css3 实现正方体3D旋转

源代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8

亦凉/ 2022年06月04日 00:06/ 0 赞/ 334 阅读

相关 css3平移，旋转，动画

<style> body{ perspective: 2000px; }

缺乏、安全感/ 2022年01月22日 23:29/ 0 赞/ 327 阅读

相关 css动画 3d旋转相册

思路: 重叠四个图片,然后设置行变点在中心的z轴往后的方向上,分别设置其他图片绕y轴的旋转角度,设置父容器的行变中心点和图片一样并设置透视和3d属

待我称王封你为后i/ 2021年07月25日 02:37/ 0 赞/ 549 阅读