纯CSS做一个3D正方体的小例子-阿里云开发者社区

纯CSS做一个3D正方体的小例子

2022-05-17 210

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 纯CSS做一个3D正方体的小例子

这是一个CSS做的旋转正方体小例子

<style>
.wrap {
width: 500px;
height: 500px;
perspective: 800px;
/* 旋转原点 */perspective-origin: 50%100px;
margin-top: 300px;
margin-left: 300px;
    }
.cube {
position: relative;
width: 200px;
height: 200px;
/* 确保6个面都处于3D立体状态 */transform-style: preserve-3d;
animation: spin6slinearinfinite;
/*设置动画*/    }
.cubediv {
position: absolute;
width: 200px;
height: 200px;
text-align: center;
line-height: 200px;
color: rgba(0, 0, 0, 0.5);
font-family: sans-serif;
text-transform: uppercase;
background: rgba(255, 255, 255, 0.1);
box-shadow: inset0030pxrgba(125, 125, 125, 0.8);
    }
/* 上下左右 */@keyframesspin {
/* from { transform: rotateY(0); }    to { transform: rotateY(360deg); } */0% {
transform: rotateX(0deg);
        }
25% {
transform: rotateX(180deg);
        }
50% {
transform: rotateX(360deg) rotateY(0deg);
        }
75% {
transform: rotateX(360deg) rotateY(180deg);
        }
100% {
transform: rotateX(360deg) rotateY(360deg);
        }
    }
.back {
transform: translateZ(-100px) rotateY(180deg);
    }
.right {
transform: rotateY(-270deg) translateX(100px);
transform-origin: topright;
    }
.front {
transform: translateZ(100px);
    }
.left {
transform: rotateY(270deg) translateX(-100px);
transform-origin: centerleft;
    }
.top {
transform: rotateX(-90deg) translateY(-100px);
transform-origin: topcenter;
    }
.bottom {
transform: rotateX(90deg) translateY(100px);
transform-origin: bottomcenter;
    }
</style>

<divclass="wrap"><divclass="cube"><divclass="front">front</div><divclass="back">back</div><divclass="top">top</div><divclass="bottom">bottom</div><divclass="left">left</div><divclass="right">right</div></div></div>