CSS入门案例（2）：立方体旋转_css 罐体旋转-优快云博客

本文链接：https://blog.youkuaiyun.com/Rengarhunt/article/details/110007232

这篇博客展示了如何使用CSS3创建一个3D旋转立方体效果，通过设置不同的transform属性，实现了六个面分别以不同颜色显示并进行翻转动画。涉及到的关键技术包括perspective、transform-style、transform-origin、@keyframes等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

	<div class="box">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>

		*{margin: 0;padding: 0;}
        .box{
            width: 600px;height: 600px;margin: 25px auto;perspective: 900px;
        }
        .box ul{
            width: 300px;height: 300px;margin: 150px;position: absolute;transform-style: preserve-3d;
            animation: move 4s infinite linear;transform-origin: center center 150px;
        }
        .box ul li{
            list-style: none;height: 300px;width: 300px;position: absolute;
        }
        .box ul li:nth-of-type(1){background: red;opacity: 0.5;}
        .box ul li:nth-of-type(2){background: blue;opacity: 0.5;transform-origin: left;transform: translateX(300px) rotateY(-90deg);}
        .box ul li:nth-of-type(3){background: green;opacity: 0.5;transform-origin: top;transform: translateY(300px) rotateX(90deg);}
        .box ul li:nth-of-type(4){background: yellow;opacity: 0.5;transform-origin: right;transform: translateX(-300px) rotateY(90deg);}
        .box ul li:nth-of-type(5){background: purple;opacity: 0.5;transform-origin: bottom;transform: translateY(-300px) rotateX(-90deg);}
        .box ul li:nth-of-type(6){background: yellowgreen;opacity: 0.5;transform: translateZ(300px);}
        @keyframes move{
            from{transform: rotateY(0deg);}
            to{transform: rotateY(360deg);}
        }