<style>
:root, body{
height: 100%;
}
body{
perspective: 2000px; //景深越大,距离屏幕越远
transform-style: preserve-3d;
}
@keyframes round{
0%{
transform: translate(-50% ,-50%) rotate3d(1,1,2,0deg)
}
100%{
transform: translate(-50% ,-50%) rotate3d(1,1,2,360deg)
}
}
.wrapper{
width: 200px;
height: 200px;
position: absolute;
top:calc(50%);
left:calc(50%);
transform: translate(-50% ,-50%) ;
transform-style: preserve-3d;
animation: round 4s linear infinite;
/* backface-visibility: hidden; */ //决定背面是否显示
}
.wrapper div{
width: 200px;
height: 200px;
font-size: 20px;
text-align: center;
line-height: 200px;
border: 1px solid black;
box-shadow: 2px 2px 3px yellow,
inset 5px 5px 5px #ff4400;
position: absolute;
}
.wrapper div:nth-of-type(1){
transform: rotatey(0deg) translatez(100px) ;
background-color: rgba(0, 0,200, 0.5);
}
.wrapper div:nth-of-type(2){
transform: rotateY(90deg) translatez(100px);
background-color: rgba(255, 0,255, 0.5)
}
.wrapper div:nth-of-type(3){
transform: rotateY(90deg) translatez(-100px);
background-color: rgba(0, 100,0, 0.5)
}
.wrapper div:nth-of-type(4){
transform: rotatex(90deg) translatez(100px);
background-color: rgba(255,,0, 0.5)
}
.wrapper div:nth-of-type(5){
transform: rotatex(90deg) translatez(-100px);
background-color: rgba(100, 200,0, 0.5)
}
.wrapper div:nth-of-type(6){
transform: rotateX(0deg) translatez(-100px);
background-color: rgba(0, 200,100, 0.5)
}
</style>
</head>
<body>
<div class="wrapper">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
<script>
// var wrapper = document.getElementsByClassName('wrapper')[0];
//给body身上添加鼠标滑动事件,切换3d旋转轴的中心,实现立体效果
document.body.onmousemove = function(e){
console.log(e)
this.style.perspectiveOrigin = '' + e.pageX + 'px '+ e.pageY +'px';
}
</script>
</body>
纯css3来实现3d旋转正方体的效果
最新推荐文章于 2024-08-02 12:09:11 发布