css3平移，旋转，动画

最新推荐文章于 2022-03-11 11:34:47 发布

大可&不必

最新推荐文章于 2022-03-11 11:34:47 发布

阅读量2.5k

点赞数

文章标签： css3平移，旋转，动画

本文链接：https://blog.csdn.net/style201904/article/details/90726535

版权

  <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>

在这里插入图片描述

大可&不必

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
css3平移，旋转，动画

<style> body{ perspective: 2000px; } .cube{ position: relative; width: 300px; height: 300px; margin: 100px a...
复制链接

扫一扫