实现3D立方体旋转(代码) 心已赠人 2024-04-18 10:02 16阅读 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
还没有评论,来说两句吧...