css3平移，旋转，动画

缺乏、安全感 2022-01-22 23:29 309阅读 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 条评论，309人围观）

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

相关阅读

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

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

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

相关 android动画平移淡出,Android旋转动画和平移动画混合效果

最近由于项目需要要做一个按钮的平移加旋转的动画效果，本以为是信手拈来的事，按部就班的写了以下代码： RotateAnimation rotateAnim =newRotat

素颜马尾好姑娘i/ 2022年10月16日 04:44/ 0 赞/ 181 阅读

相关 HTML+CSS3彩色旋转动画js特效

[下载地址][Link 1] HTML+CSS3彩色旋转动画特效，五彩斑斓的圆点旋转网页特效。 ![1632803206.png][] dd: [Link 1]: h

小咪咪/ 2022年09月13日 14:20/ 0 赞/ 414 阅读

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

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

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

相关 CSS变形平移旋转缩放

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

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

相关平移动画 TranslateAnimation

平移动画可以演示一个视图在X轴和Y轴上位置改变的动画效果。它的主要属性有： fromXDelta动画起始时 X坐标上的位置 fromYDelta动画起始时 Y坐标上的位置

喜欢ヅ旅行/ 2022年06月17日 00:41/ 0 赞/ 183 阅读

相关 css3图片旋转动画

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

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

相关 css3平移，旋转，动画

<style> body{ perspective: 2000px; }

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

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

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

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

相关 css动画 3d旋转相册

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

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