学习笔记——CSS 3D旋转木马实现

r囧r小猫 2022-11-12 13:59 358阅读 0赞

> 灵活运用CSS3中的transform属性，perspective属性以及transition属性实现旋转木马动画效果。
> 
>

--------------------

### 1.效果图： ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzM5MTI2_size_16_color_FFFFFF_t_70][]

实现特点：先按Z轴移动后旋转。

### 2.代码： ###

* { padding: 0; margin: 0; }
                .box1 {
                    width: 400px;
                    height: 400px;
                    border: 1px solid #000000;
                    margin: 100px auto; 
                    perspective: 700px;
                }
                .box2 {
                    margin: 150px; 
                    list-style: none;
                    position: relative;
                    width: 100px;
                    height: 100px;   
                    transform-style: preserve-3d;
                    transition: all 2s;
                    transform-origin: center center 0;
                }
                ul.box2 li {
                    position: absolute;
                    left: 0;
                    top: 0;
                    width: 100px;
                    height: 100px;
                    font-size: 24px;
                    text-align: center;
                    line-height: 100px;
                    color: white;
                }
                ul.box2 li:nth-child(1) { background-color: #006722; transform: rotateY(0deg) translateZ(120px); }
                ul.box2 li:nth-child(2) { background-color: #000000; transform: rotateY(60deg) translateZ(120px); }
                ul.box2 li:nth-child(3) { background-color: #0000FF; transform: rotateY(120deg) translateZ(120px); }
                ul.box2 li:nth-child(4) { background-color: #007AFF; transform: rotateY(180deg) translateZ(120px); }
                ul.box2 li:nth-child(5) { background-color: #70D200; transform: rotateY(240deg) translateZ(120px); }
                ul.box2 li:nth-child(6) { background-color: #2C3E50; transform: rotateY(300deg) translateZ(120px); }
                
                .box1:hover ul { transform: rotateY(360deg); }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzM5MTI2_size_16_color_FFFFFF_t_70]: /images/20221022/c2e39844b02149d784b964915d8f75b2.png