CSS3 3D 转换（3D Transforms）是允许你在三维空间中变换元素的技术。这包括旋转、平移和缩放等操作。通过 transform 属性，你可以实现更复杂的视觉效果，如旋转立方体、制作动画等。
1 旋转 (rotateX, rotateY, rotateZ)
transform: rotateX(angle);
transform: rotateY(angle);
transform: rotateZ(angle); /* 或者使用 rotate(angle) */
rotateX(angle)：绕 X 轴旋转。
rotateY(angle)：绕 Y 轴旋转。
rotateZ(angle)：绕 Z 轴旋转（也可以使用 rotate(angle)）。
2 平移 (translateX, translateY, translateZ)
transform: translateX(distance);
transform: translateY(distance);
transform: translateZ(distance);
translateX(distance)：沿 X 轴平移。
translateY(distance)：沿 Y 轴平移。
translateZ(distance)：沿 Z 轴平移（注意：需要 3D 上下文）。
3 缩放 (scaleX, scaleY, scaleZ)
在 CSS 中，transform 属性允许使用 scaleX、scaleY 和 scaleZ 来进行元素的缩放。这些函数分别对元素的 X 轴、Y 轴和 Z 轴进行缩放变换。它们是 transform 属性的组成部分，用于在不同轴上调整元素的大小。
transform: scaleX(sx) scaleY(sy) scaleZ(sz);
- scaleX(sx): 沿 X 轴进行缩放，sx 是一个数值，表示缩放比例。1 表示原始大小，0.5 表示缩小到原来的 50%，2
表示放大到原来的 200%。 - scaleY(sy): 沿 Y 轴进行缩放，sy 是一个数值，表示缩放比例。
- scaleZ(sz): 沿 Z 轴进行缩放，sz 是一个数值，表示缩放比例。这个属性主要用于 3D 转换中。
.container {
perspective: 500px; /* 为 3D 效果提供透视 */
}
.box {
width: 100px;
height: 100px;
background-color: #2ecc71;
transform: scaleX(1.5) scaleY(1.5) scaleZ(2); /* 沿 X 和 Y 轴放大到原来的 150%，沿 Z 轴放大到原来的 200% */
}
在这个例子中，.box 元素在 X 和 Y 轴上会被放大到原来的 150%，在 Z 轴上则会被放大到原来的 200%。注意，需要在父容器上应用 perspective 属性来使 Z 轴缩放效果可见。
4 透视 (perspective)
perspective 属性在 CSS 中用于为元素提供 3D 效果，通过定义元素到观察者的距离来影响元素在 3D 空间中的深度和远近感。
透视属性影响 3D 元素的深度感知，通常应用于父容器上。
perspective: value;
- value: 指定观察者到元素平面的距离，通常用像素（px）或其他长度单位。较小的值会产生更明显的 3D 效果。
- 基本透视
.container {
perspective: 500px; /* 调整这个值可以得到不同的效果 */
}
.box {
width: 100px;
height: 100px;
background-color: #3498db;
transform: rotateY(45deg);
}
2. 关键点
- 深度感: perspective 控制观察者到元素的距离，影响 3D 效果的明显程度。
- 透视原点: perspective-origin 属性可以调整透视的消失点，从而改变 3D 效果的视觉呈现。
- 应用于容器: 通常 perspective 应用在父容器上，这样它会影响所有子元素的 3D 变换效果。
五 transform-style
transform-style 属性在 CSS 中用于指定如何处理子元素的 3D 转换效果。它控制了子元素是否在 3D 空间中保持其 3D 转换效果。
- 基本语法
transform-style: flat | preserve-3d;
- flat: 默认值，子元素的 3D 转换效果被展平成 2D。即使子元素有 3D 转换，它们也会被看作在同一平面上。
- preserve-3d: 子元素的 3D 转换效果会被保留，使得子元素在 3D 空间中有深度和层次感。
.container {
transform-style: preserve-3d;
}
.child {
width: 100px;
height: 100px;
background-color: #3498db;
transform: rotateY(45deg) translateZ(100px);
}
在这个例子中，.child 元素的旋转和深度效果会被保留，使其看起来像是在 3D 空间中。
- 关键点
- 层次效果: preserve-3d 使子元素在 3D 空间中显示其深度和层次感。
- 适用场景: 使用 transform-style 主要是为了在包含多个层次的 3D 变换中保持深度效果。
六 3D案例
- 3D 卡片翻转效果
创建一个可以翻转的 3D 卡片效果。当用户点击卡片时，它会在 3D 空间中翻转，展示背面的内容。
<div class="card">
<div class="card-inner">
<div class="card-face card-front">Front</div>
<div class="card-face card-back">Back</div>
</div>
</div>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: #f0f0f0;
}
.card {
width: 200px;
height: 300px;
perspective: 1000px;
}
.card-inner {
position: relative;
width: 100%;
height: 100%;
transition: transform 0.6s;
transform-style: preserve-3d;
cursor: pointer;
}
.card:hover .card-inner {
transform: rotateY(180deg);
}
.card-face {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
display: flex;
justify-content: center;
align-items: center;
font-size: 2rem;
}
.card-front {
background: #ffffff;
border: 1px solid #ccc;
}
.card-back {
background: #f76c6c;
color: #fff;
transform: rotateY(180deg);
}
- 3D 旋转立方体
创建一个可以旋转的 3D 立方体。你可以控制立方体的旋转角度，使其在 3D 空间中旋转。
body {
margin: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: #f0f0f0;
perspective: 1000px;
}
.scene {
width: 200px;
height: 200px;
position: relative;
}
.cube {
position: absolute;
width: 100%;
height: 100%;
transform-style: preserve-3d;
transform: rotateX(0) rotateY(0);
transition: transform 1s;
}
.face {
position: absolute;
width: 200px;
height: 200px;
background: rgba(255, 255, 255, 0.9);
border: 1px solid #ccc;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.5rem;
color: #333;
}
.front { transform: rotateY( 0deg) translateZ(100px); }
.back { transform: rotateY(180deg) translateZ(100px); }
.left { transform: rotateY(-90deg) translateZ(100px); }
.right { transform: rotateY( 90deg) translateZ(100px); }
.top { transform: rotateX( 90deg) translateZ(100px); }
.bottom { transform: rotateX(-90deg) translateZ(100px); }
<div class="scene">
<div class="cube">
<div class="face front">Front</div>
<div class="face back">Back</div>
<div class="face left">Left</div>
<div class="face right">Right</div>
<div class="face top">Top</div>
<div class="face bottom">Bottom</div>
</div>
</div>
<script>
const cube = document.querySelector('.cube');
let angleX = 0;
let angleY = 0;
function animate() {
angleX += 1;
angleY += 1;
cube.style.transform = `rotateX(${angleX}deg) rotateY(${angleY}deg)`;
requestAnimationFrame(animate);
}
animate();
</script>
- 3D 轮播图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D Carousel</title>
<style>
body {
margin: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: #333;
overflow: hidden;
}
.carousel {
position: relative;
width: 300px;
height: 300px;
perspective: 1000px;
}
.carousel-inner {
position: absolute;
width: 100%;
height: 100%;
transform-style: preserve-3d;
transform: rotateX(0deg) rotateY(0deg);
transition: transform 1s;
}
.carousel-item {
position: absolute;
width: 100%;
height: 100%;
background: #f0f0f0;
border: 1px solid #ccc;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.5rem;
color: #333;
backface-visibility: hidden;
}
.carousel-item:nth-child(1) { transform: rotateY(0deg) translateZ(250px); }
.carousel-item:nth-child(2) { transform: rotateY(60deg) translateZ(250px); }
.carousel-item:nth-child(3) { transform: rotateY(120deg) translateZ(250px); }
.carousel-item:nth-child(4) { transform: rotateY(180deg) translateZ(250px); }
.carousel-item:nth-child(5) { transform: rotateY(240deg) translateZ(250px); }
.carousel-item:nth-child(6) { transform: rotateY(300deg) translateZ(250px); }
</style>
</head>
<body>
<div class="carousel">
<div class="carousel-inner">
<div class="carousel-item">1</div>
<div class="carousel-item">2</div>
<div class="carousel-item">3</div>
<div class="carousel-item">4</div>
<div class="carousel-item">5</div>
<div class="carousel-item">6</div>
</div>
</div>
<script>
let angle = 0;
function rotateCarousel() {
angle += 0.5;
document.querySelector('.carousel-inner').style.transform = `rotateY(${angle}deg)`;
requestAnimationFrame(rotateCarousel);
}
rotateCarousel();
</script>
</body>
</html>
521
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
