学习笔记——CSS 3D效果实现立方体

傷城~ 2022-11-12 13:57 218阅读 0赞

> 灵活运用CSS3中的transform属性以及perspective属性。

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzM5MTI2_size_16_color_FFFFFF_t_70][]

鼠标滑过盒子，立方体旋转一周。

### 2.代码： ###

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzM5MTI2_size_16_color_FFFFFF_t_70]: /images/20221022/12de07792cea4a39b9e8ee278145ca6d.png