<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS3 魔方旋转</title>
<style>
body {
background-color: #f0f0f0;
perspective: 800px; /* 为父元素添加透视效果 */
}
.cube-container {
width: 200px;
height: 200px;
position: relative;
margin: 100px auto;
transform-style: preserve-3d; /* 使子元素保留3D变换 */
animation: rotate 10s linear infinite; /* 添加旋转动画 */
}
.cube-face {
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(0, 128, 255, 0.7); /* 设置半透明蓝色 */
border: 1px solid black;
box-sizing: border-box; /* 将边框包含在元素宽度内 */
text-align: center;
line-height: 200px;
font-size: 2em;
color: white;
}
/* 定义每个面的位置 */
.front { transform: translateZ(100px); }
.back { transform: rotateY(180deg) translateZ(100px); }
.right { transform: rotateY(90deg) translateZ(100px); }
.left { transform: rotateY(-90deg) translateZ(100px); }
.top { transform: rotateX(90deg) translateZ(100px); }
.bottom { transform: rotateX(-90deg) translateZ(100px); }
/* 定义旋转动画 */
@keyframes rotate {
from { transform: rotateX(0deg) rotateY(0deg); }
to { transform: rotateX(360deg) rotateY(360deg); }
}
</style>
</head>
<body>
<div class="cube-container">
<div class="cube-face front">Front</div>
<div class="cube-face back">Back</div>
<div class="cube-face right">Right</div>
<div class="cube-face left">Left</div>
<div class="cube-face top">Top</div>
<div class="cube-face bottom">Bottom</div>
</div>
</body>
</html>
代码解释:
perspective: 800px;: 为body元素设置透视效果，数值越大，透视效果越弱，看起来越扁平。transform-style: preserve-3d;: 关键属性，使子元素在3D空间中呈现。translateZ(100px);: 将每个面沿着Z轴平移100px，使其位于正确的位置，100px是边长的一半。rotateX(),rotateY(): 分别绕X轴和Y轴旋转。@keyframes rotate: 定义旋转动画，使魔方绕X轴和Y轴无限旋转。
改进方向:
- 更复杂的旋转: 可以通过修改
@keyframes来实现更复杂的旋转动画，例如只绕一个轴旋转，或者按特定顺序旋转。 - 交互性: 可以使用 JavaScript 添加交互性，例如通过鼠标拖拽来控制魔方的旋转。
- 更逼真的效果: 可以使用更复杂的 CSS 样式和动画来实现更逼真的魔方效果，例如添加阴影、高光等。
- 使用 3D transform library: 可以使用一些现成的 3D transform 库，例如 Three.js，来更方便地创建和操作 3D 对象。
这个例子提供了一个基本的 CSS3 魔方旋转效果，你可以根据自己的需求进行修改和扩展。 希望这个例子对您有所帮助!
标签：css3,translateZ,魔方,100px,transform,旋转,rotateY From： https://www.cnblogs.com/ai888/p/18573750