如何在 CSS 中设置 3D 元素的基本位置?
CSS 已经从简单的样式表发展成为一种强大的语言，可以创建复杂精致的布局和设计。CSS 最令人兴奋的功能之一是在网页上创建 3D 元素。借助 CSS 3D 变换，我们现在可以创建以前只能通过 JavaScript 或 Flash 实现的精美 3D 效果。在本文中，我们将了解如何在 CSS 中设置 3D 元素的基本位置。我们还将探讨 CSS 3D 变换的基础知识以及如何使用它们创建简单的 3D 元素。
什么是 CSS 3D 变换?
CSS 3D 变换是一组 CSS 属性，允许我们在三维空间中操作元素，包括旋转、平移、缩放和倾斜。这些变换可以应用于网页上的任何元素，包括文本、图片，甚至整个页面。
语法
<style> transform: rotate(angle); </style>
这里的"angle"是指应用于元素的旋转角度，以度为单位。
3D CSS 中的基本位置是什么?
首先让我们了解一下什么是基本位置。在 3D CSS 中，基本位置是指 3D 元素相对于视口的位置和方向。
默认情况下，3D 元素固定在视口的中心，并直接面向查看者。我们可以调整 3D 元素的基本位置，使用 CSS 创建不同的视角或方向。例如，我们可以通过调整 3D 对象的基本位置，使其更靠近观看者，或者可以将其倾斜一定角度，以创建更具动感的效果。
如何在 3D CSS 中设置基本位置?
现在，让我们探索如何在 CSS 中设置它。我们可以使用一些不同的属性来调整基本位置 -
使用 transform-origin 属性
transform-origin 属性允许我们设置变换的原点，这会影响 3D 元素的基本位置。默认情况下，transform-origin 设置为元素的中心，但我们可以使用 transform-origin 属性更改原点。
例如，如果我们想将 3D 对象移近观察者，我们可以将 transform-origin 设置为更靠近对象正面的点。
示例 1:使用 transform-origin 属性
在此示例中，我们使用 transform-origin 属性调整 3D 框的基准位置。我们还将容器的视角设置为 1000px，这控制了观察者相对于 3D 元素的位置。transform 属性使框绕 Y 轴和 X 轴旋转，使其呈现倾斜的外观。
值 50% 和 50% 指的是框的中心，而值 -100px 将原点设置为框中心后方 100 像素的位置。这会产生将盒子移近观看者的效果，并产生更具动态的 3D 效果。
<!DOCTYPE html>
<html>
<head>
<style>
body { text-align: center; }
.container { perspective: 1000px; }
.box {
width: 200px;
height: 200px;
background-color: green;
transform: rotateY(45deg) rotateX(45deg);
transform-origin: 50% 50% -100px;
transform-style: preserve-3d;
}
</style>
</head>
<body>
<h3>Setting the base placement using the transform-origin property</h3><br><br>
<div class="container">
<div class="box"></div>
</div>
</body>
</html>
使用 Perspective 和 transform-style 属性
perspective 属性控制观察者观察 3D 元素的视角。默认情况下，perspective 的值设置为 1000px，这意味着观察者距离元素 1000 像素。
我们可以调整 perspective 值来改变观察者的位置，并为元素创建不同的基准位置。例如，将 perspective 设置为较低的值可以使元素看起来更大、更靠近观察者，从而产生更具戏剧性的效果。
transform-style 属性控制嵌套 3D 元素的渲染方式。默认情况下，嵌套的 3D 元素会继承其父元素的基本位置，但我们可以通过将 transform-style 属性设置为"preserve-3d"来更改此设置。
当我们将 transform-style 设置为"preserve-3d"时，嵌套的 3D 元素将保持其自身的基本位置和方向，从而允许我们创建更复杂的 3D 效果。
示例 2:创建具有透视和变换的 3D 立方体
在此示例中，我们首先创建一个类名为"cube"的容器元素，并设置其宽度、高度、位置、transform-style 和 perspective 属性。我们还创建了六个类名为"face"的子元素，每个子元素代表立方体的一个面。我们设置它们的宽度、高度、背景颜色和边框属性。
然后，我们设置每个 face 元素的 transform 属性，使其在 3D 空间中正确定位。例如，使用 transformZ 属性将正面放置在距离观察者 100 像素的位置，将背面沿 y 轴旋转 180 度，放置在距离观察者 100 像素的位置，将右侧面沿 y 轴旋转 90 度，放置在距离观察者 100 像素的位置。
<!DOCTYPE html>
<html>
<head>
<style>
h3 { text-align: center;}
.cube {
margin: auto;
width: 200px;
height: 200px;
position: relative;
transform-style: preserve-3d;
perspective: 1000px;
}
.face {
position: absolute;
width: 200px;
height: 200px;
background-color: rgba(0, 153, 255, 0.5);
border: 2px solid white;
}
.front {transform: translateZ(100px); }
.back { transform: rotateY(180deg) translateZ(100px); background-color: black; }
.right {transform: rotateY(90deg) translateZ(100px); background-color: red;}
.left { transform: rotateY(-90deg) translateZ(100px); background-color: green;}
.top {transform: rotateX(90deg) translateZ(100px); background-color: yellow; }
.bottom { transform: rotateX(-90deg) translateZ(100px); background-color: blue; }
</style>
</head>
<body>
<h3>Setting the base placement using the transform-origin property</h3><br>
<div class="cube">
<div class="face front"></div>
<div class="face back"></div>
<div class="face right"></div>
<div class="face left"></div>
<div class="face top"></div>
<div class="face bottom"></div>
</div>
</body>
</html>
结论
CSS 3D 变换使我们能够在网页上创建令人惊叹的 3D 效果。通过设置 3D 元素的基准位置，我们可以控制它们在 3D 空间中的显示位置。使用 transform-origin 属性设置原点，并使用 perspective 属性为元素创建 3D 空间。
相关文章
有用资源
css 参考教程 - 该教程包含有关 css 的更多信息:https://www.cainiaomax.com/css/
