html5+css3绘制旋转立方体
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>立方体</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
border: 0;
}
.warp {
width: 200px;
height: 200px;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
position: absolute;
transform: rotate3d(1, 1, 0, -30deg);
transform-style: preserve-3d;
animation: donghua 5s 0.2s linear infinite;
}
@keyframes donghua {
0% {
transform: rotateY(0) rotateX(30deg);
}
100% {
transform: rotateY(360deg) rotateX(30deg);
}
}
.warp div {
width: 200px;
height: 200px;
font-size: 250px;
text-align: center;
position: absolute;
line-height: 200px;
}
.warp div:nth-child(1) {
background: rgba(255, 0, 0, 0.6);
transform: translateZ(100px);
}
.warp div:nth-child(2) {
background: rgba(0, 255, 0, 0.6);
transform: translateZ(-100px) rotateY(180deg);
}
.warp div:nth-child(3) {
background: rgba(0, 0, 255, 0.6);
transform: translateX(-100px) rotateY(-90deg);
}
.warp div:nth-child(4) {
background: rgba(255, 255, 0, 0.6);
transform: translateX(100px) rotateY(90deg);
}
.warp div:nth-child(5) {
background: rgba(255, 100, 100, 0.6);
transform: translateY(-100px) rotateX(90deg);
}
.warp div:nth-child(6) {
background: rgba(255, 0, 255, 0.6);
transform: translateY(100px) rotateX(-90deg);
}
</style>
</head>
<body>
<div class="warp">
<div>⚀</div>
<div>⚁</div>
<div>⚂</div>
<div>⚃</div>
<div>⚄</div>
<div>⚅</div>
</div>
</body>
</html>
评论 (0)