实现3D立方体旋转（代码）

心已赠人 2024-04-18 10:02 182阅读 0赞

3D讲解链接：  
不懂请看下方链接结构代码：  
[https://blog.csdn.net/l1936441554/article/details/99080122][https_blog.csdn.net_l1936441554_article_details_99080122]

结构代码分析：  
设置六个 div 标签，分别命名为正方体的六个面：  
![在这里插入图片描述][20190904230157303.png]

样式代码：  
\*\{  
box-sizing: border-box;  
\}

html\{  
height: 100%;  
\}

body\{  
margin: 0;  
height: 100%;  
background-image: url(’…/7.12/images/44.jpg’);  
background-size: 100% 100%;  
background-position: center center;  
position: relative;  
/\* 添加景深效果 \*/  
perspective: 1000px;  
\}

main\{  
width: 100px;  
height: 100px;  
/\* outline 轮廓线 dashed 虚线 */  
/* outline: 2px dashed red; */  
/* 使用绝对定位进行元素居中 */  
position: absolute;  
top:0;  
bottom: 0;  
left: 0;  
right: 0;  
margin: auto;  
/* 转换样式：控制自己内部标签的转换样式 \*/  
transform-style:preserve-3d;

.surface\{  
width: 100px;  
height: 100px;  
position: absolute;  
left: 0;  
top: 0;  
/\* 透明度 */  
opacity: 0.6;  
background-position: center center;  
background-size: 100% 100%;  
/* 元素阴影 */  
box-shadow: 0 0 50px \#fff;  
/* border-radius: 50%; \*/  
\}

/\* 在浏览器环境中，每一个元素都有自己的独立的坐标系  
元素任何变形，都是所在坐标系的变形，而不是元素本身 \*/

.top\{  
background-image: url(’…/7.12/images/66.jpg’);  
/\* 想象旋转轴指向自己，顺时针为正值 */  
transform: rotateX(90deg) translateZ(50px);  
\}  
.bottom\{  
background-image: url(’…/7.12/images/88.jpg’);  
transform:rotateX(-90deg) translateZ(50px);  
\}  
.left\{  
background-image: url(’…/7.12/images/bj5.jpg’);  
transform: rotateY(-90deg) translateZ(50px);  
\}  
.right\{  
background-image: url(’…/7.12/images/bj6.jfif’);  
transform: rotateY(90deg) translateZ(50px);  
\}  
.front\{  
background-image: url(’…/7.12/images/bj7.jpg’);  
/* 使用 平移 进行位置控制 \*/  
transform: translateZ(50px) rotateX(180deg);  
\}  
.back\{  
background-image: url(’…/7.12/images/bj8.jfif’);  
transform: translateZ(-50px) rotateX(180deg);  
\}

.rotota\{  
animation: rotota 6s linear infinite;  
animation-timing-function: cubic-bezier(1,1,1,1);  
\}

@keyframes rotota\{  
from\{  
transform:rotateY(0) rotateX(0)  
\}  
to\{  
transform: rotateY(720deg) rotateX(360deg)  
\}  
\}

最终效果展示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2wxOTM2NDQxNTU0_size_16_color_FFFFFF_t_70]

[https_blog.csdn.net_l1936441554_article_details_99080122]: https://blog.csdn.net/l1936441554/article/details/99080122
[20190904230157303.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/2f52bd3039e944439d2bcb5f543f958a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2wxOTM2NDQxNTU0_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/5561c19744994eeea64c31a83124ac76.png