数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何在 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 元素固定在视口的中心，并直接面向查看者。我们可以使用 CSS 调整 3D 元素的基本放置位置以创建不同的透视或方向。例如，我们可以通过调整 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 空间中。例如，前面使用 translateZ 属性放置在距查看者 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 空间。
111 次浏览
