css3平移，旋转，动画

缺乏、安全感 2022-01-22 23:29 342阅读 0赞

<style>
            body{
                perspective: 2000px;
            }
            .cube{
                position: relative;
                width: 300px;
                height: 300px;
                margin: 100px auto;
                transform-style: preserve-3d;
                transform: rotateY(15deg);
                animation: myrotate 4s linear infinite;
            }
            .cube div{
                position: absolute;
                top: 0;
                left: 0;
                width: 300px;
                height: 300px;
                border: 1px solid black;
                text-align: center;
                line-height: 300px;
                font-size: 30px;
                transition: 0.5s linear;
            }
            .top{
                transform: rotateX(90deg) translateZ(150px);
            }
            .bottom{
                transform: rotateX(-90deg) translateZ(150px);
            }
            .left{
                transform: rotateY(-90deg) translateZ(150px);
            }
            .right{
                transform: rotateY(90deg) translateZ(150px);
            }
            .front{
                transform: translateZ(150px);
            }
            .back{
                transform: rotateY(180deg) translateZ(150px);
            }
    
            @keyframes myrotate{
                0%{
                    transform: rotateY(0deg) rotateX(0deg);
                }
                100%{
                    transform: rotateY(360deg)  rotateX(720deg);
                }
            }
    
            .cube:hover .top{
                transform: rotateX(90deg) translateZ(200px);
            }
            .cube:hover .bottom{
                transform: rotateX(-90deg) translateZ(200px);
            }
            .cube:hover .left{
                transform: rotateY(-90deg) translateZ(200px);
            }
            .cube:hover .right{
                transform: rotateY(90deg) translateZ(200px);
            }
            .cube:hover .front{
                transform: translateZ(200px);
            }
            .cube:hover .back{
                transform: rotateY(180deg) translateZ(200px);
            }
    
        </style>
    </head>
    <body>
        <div class="cube">
            <div class="top">top</div>
            <div class="bottom">bottom</div>
            <div class="left">left</div>
            <div class="right">right</div>
            <div class="front">front</div>
            <div class="back">back</div>
        </div>
    </body>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0eWxlMjAxOTA0_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0eWxlMjAxOTA0_size_16_color_FFFFFF_t_70]: /images/20220123/5c913bccaec741d6b4d19b5cd2de88b4.png

发表评论取消回复

表情：

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

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

相关阅读

相关 CSS_变形之平移&旋转&缩放

平移translate X和Y轴平移 transform: translateX(-50%) translateY(-50%); <!DOCTYPE htm

小咪咪/ 2023年10月06日 16:59/ 0 赞/ 74 阅读

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

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

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

相关 Jquery使用animate实现css3的平移动画效果

Jquery使用animate实现css3的平移动画效果实现效果： ![20200518161938390.gif][] 首先，Jquery并不支持在animate的

短命女/ 2023年02月09日 10:26/ 0 赞/ 14 阅读

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

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

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

相关纯css3风车旋转动画js特效

[下载地址][Link 1]此风车效果，用到了css3的自定义动画、旋转、圆角、阴影效果来实现 ![1631561083.png][] dd: [Link 1]:

客官°小女子只卖身不卖艺/ 2022年09月12日 01:44/ 0 赞/ 269 阅读

相关 CSS变形平移旋转缩放

CSS变形平移的特点：变形不会影响页面的布局，即只会影响元素自己，而不影响其他元素。使用transform来设置元素的变形效果平移： tr

Bertha 。/ 2022年09月04日 09:53/ 0 赞/ 344 阅读

相关 css3图片旋转动画

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

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

相关 css3平移，旋转，动画

<style> body{ perspective: 2000px; }

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

相关 CSS3 transform动画 3D旋转立体正方形

CSS3 transform动画 3D旋转立体正方形在一个大的div里放置六个小div，分别向前后，向左右，向上下移动相等位置，再将平面div旋转，添加animatio

「爱情、让人受尽委屈。」/ 2021年07月25日 13:57/ 0 赞/ 689 阅读

相关 css动画 3d旋转相册

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

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