css3实现3D立方体效果

由 夕空 撰写于  2019年12月30日
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>css3实现3D效果</title>
<style>
* {
margin:0;
padding:0;
list-style:none;
box-sizing:border-box;
}
.container {
width:300px;
height:300px;
margin:200px auto;
perspective:500px;/*视角观察距离*/
}
.box {
position:relative;
width:300px;
height:300px;
transform-style:preserve-3d;
animation:run 10s ease-out infinite alternate;/*ease类型 循环 往复*/
}
.box div {
width:300px;
height:300px;
position:absolute;
text-align:center;
line-height:300px;
font-size:32px;
}
.front {
transform:translateZ(120px);
background-color:rgba(0,210,255,0.8);
}
.back {
transform:translateZ(-120px) rotateY(180deg);
background-color:rgba(36,255,1,0.8);
}
.left {
left:-120px;
transform:rotateY(-90deg);
background-color:rgba(25,62,75,0.8);
}
.right {
left:120px;
transform:rotateY(90deg);
background-color:rgba(25,62,75,0.8);
}
.top {
top:-120px;
transform:rotateX(90deg);
background-color:rgba(255,62,26,0.8);
}
.bottom {
top:120px;
transform:rotateX(-90deg);
background-color:rgba(255,62,26,0.8);
}
@keyframes run {
from {
transform:rotateY(0);
}
to {
transform:rotateY(360deg);
}
}
</style>
</head>
<body>
<div class="container">
<div class="box">
<div class="front">front</div>
<div class="back">back</div>
<div class="left">left</div>
<div class="right">right</div>
<div class="top">top</div>
<div class="bottom">bottom</div>
</div>
</div>


</body>
</html>



声明:星耀夕空|版权所有,违者必究|如未注明,均为原创|本网站采用BY-NC-SA协议进行授权

转载:转载请注明原文链接 - css3实现3D立方体效果


欢迎光顾我的小站!