css3平移，旋转，动画

最新推荐文章于 2025-09-18 01:37:38 发布

原创最新推荐文章于 2025-09-18 01:37:38 发布 · 2.5k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#css3平移，旋转，动画

本文详细介绍了如何使用CSS3实现一个动态旋转的3D立方体动画，包括立方体的六个面布局、透视效果、旋转动画及鼠标悬停时的交互效果。通过精确设置CSS属性，如transform和animation，来创建一个视觉上吸引人的3D效果。

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

在这里插入图片描述