html+css写一个3d可旋转的正方体 vscode 带注释
<!DOCTYPE html>
<html>
<head>
<title>3D可旋转正方体</title>
<style>
/* 定义正方体 */
.cube {
width: 100px;
height: 100px;
position: relative;
transform-style: preserve-3d; /* 保留3D效果 */
animation: rotate 5s infinite linear; /* 动画，每5秒无限循环旋转 */
}
/* 定义正方体的每个面 */
.cube div {
position: absolute;
width: 100px;
height: 100px;
background-color: #ccc;
opacity: 0.7;
border: 1px solid #999;
box-sizing: border-box;
}
/* 定义正方体的每个面的位置 */
.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 rotate {
from {
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}
to {
transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
}
}
</style>
</head>
<body>
<div class="cube">
<div class="front"></div>
<div class="back"></div>
<div class="left"></div>
<div class="right"></div>
<div class="top"></div>
<div class="bottom"></div>
</div>
</body>
</html
原文地址: https://www.cveoy.top/t/topic/drZ4 著作权归作者所有。请勿转载和采集!