写一段html的正方体绘制代码
<!DOCTYPE html>
<html>
<head>
<title>绘制正方体</title>
<style>
#cube {
width: 100px;
height: 100px;
position: relative;
transform-style: preserve-3d;
animation: spin 5s infinite linear;
}
#cube .face {
position: absolute;
width: 100px;
height: 100px;
background: #FFC107;
opacity: 0.7;
border: 1px solid #000;
}
#cube .front {
transform: translateZ(50px);
}
#cube .back {
transform: translateZ(-50px) rotateY(180deg);
}
#cube .left {
transform: translateX(-50px) rotateY(-90deg);
}
#cube .right {
transform: translateX(50px) rotateY(90deg);
}
#cube .top {
transform: translateY(-50px) rotateX(90deg);
}
#cube .bottom {
transform: translateY(50px) rotateX(-90deg);
}
@keyframes spin {
from {
transform: rotateY(0);
}
to {
transform: rotateY(360deg);
}
}
</style>
</head>
<body>
<div id="cube">
<div class="face front"></div>
<div class="face back"></div>
<div class="face left"></div>
<div class="face right"></div>
<div class="face top"></div>
<div class="face bottom"></div>
</div>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/ris 著作权归作者所有。请勿转载和采集!