如何在变换子元素时保留 3D 变换?
作为一名 Web 开发者，深入理解 3D 变换以及如何将其应用于子元素至关重要。变换子元素可能有点棘手，因为我们需要确保父元素的变换得以保留。CSS 3D 变换利用透视在网页上创建深度和视觉上有趣的元素。
在本文中，我们将学习如何变换子元素并保留 3D 变换。我们将学习在 HTML 中变换子元素的不同方法。
变换子元素并保留 3D 变换的不同方法
要变换子元素并保留其 3D 变换，可以使用多种不同的方法。让我们看看一些常用的子元素变换方法。
方法 1:使用 Transform-style 属性
用于变换子元素以保留 3D 元素的第一种方法是使用 transform-style 属性。此属性指定当父元素应用 3D 变换时，子元素如何在 3D 空间中变换。它有两个可能的值:preserve-3d 和 flat。以下是语法和示例 -
语法
以下是使用 transform-style 属性变换任何子元素并保留 3D 变换的语法。
.parent {
transform: rotateY(45deg);
transform-style: preserve-3d;
}
.child-wrapper {
transform: rotateY(-45deg);
transform-style: preserve-3d;
}
在上面的语法中，我们定义了一个绕 Y 轴旋转 45 度的父元素。在这里，子元素也绕 Y 轴旋转 -45 度，并且 transform-styles 属性设置为 retain-3d，这样元素的子元素就会定位在 3D 空间中，或者相对于元素所在的平面展平。
示例
在给定的示例中，我们定义了一个旋转 45 度的父元素，并且子包装器元素旋转 -45 度以抵消父元素的旋转。子元素继承了父元素和子包装器元素的旋转，因此没有旋转。
<html>
<head>
<style>
.parent-element {
width: 200px;
height: 200px;
background-color: green;
transform: rotateY(45deg);
transform-style: preserve-3d;
}
.child-wrapper-container {
transform: rotateY(-45deg);
transform-style: preserve-3d;
}
.child-element {
width: 50px;
height: 50px;
background-color: blue;
}
</style>
</head>
<body>
<h2>Transforming the Child Elements Using Transform-style Property</h2>
<div class="parent-element">
<div class="child-wrapper-container">
<div class="child-element"></div>
</div>
</div>
</body>
</html>
方法二:使用绝对位置
第二种变换子元素并保留3D元素的方法是使用绝对位置。使用此方法，我们可以轻松地将子元素定位在父元素内，而不会影响父元素的变换。
以下是语法和示例 -
语法
以下是使用绝对位置变换任何子元素并保留3D变换的语法。
.parent {
transform: rotateY(45deg);
position: relative;
}
.child {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%) rotateY(-45deg);
}
在上面的语法中，我们定义了一个绕 Y 轴旋转 45 度的父元素。我们还定义了一个绝对定位在父元素内的子元素，并使用 left 和 top 属性将其位置调整为居中。在这里，应用了子元素自身的变换，即绕 Y 轴旋转 -45 度。
示例
在给定的示例中，我们定义了一个绕 Y 轴旋转 45 度的父元素，并且子元素绝对定位在父元素内，并使用 left 和 top 属性将其位置调整为居中。
在这里，应用了子元素自身的变换，即绕 Y 轴旋转 -45 度。
<html>
<head>
<style>
.parent-element {
width: 150px;
height: 150px;
background-color: red;
transform: rotateY(45deg);
position: relative;
}
.child-element {
width: 50px;
height: 50px;
background-color: green;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%) rotateY(-45deg);
}
</style>
</head>
<body>
<h2>Transforming the Child Elements Using Absolute Position</h2>
<div class="parent-element">
<div class="child-element"></div>
</div>
</body>
</html>
方法三:使用 Backface-visibility
第三个变换子元素以保留 3D 元素的方法是使用 backface-visibility 属性。使用此属性，我们可以控制元素在 3D 空间中旋转时，其背面是否可见。如果将此属性设置为隐藏，则可以防止任何变换影响元素的背面。
语法
以下是使用 backface-visibility 属性变换任何子元素并保留 3D 变换的语法。
.parent {
transform: rotateY(45deg);
}
.child {
transform: rotateY(-45deg);
backface-visibility: hidden;
}
在上面的语法中，我们定义了一个绕 Y 轴旋转 45 度的父元素。在这里，子元素也绕 Y 轴旋转 -45 度，并且将 backface-visibility 属性设置为 hidden，以防止任何变换影响元素的背面。
示例
在给定的示例中，我们定义了一个绕 Y 轴旋转 45 度的父元素，然后子元素也绕 Y 轴旋转 -45 度，但将 backface-visibility 属性设置为 hide，以防止任何变换影响元素的背面。
<html>
<head>
<style>
.parent-element {
width: 500px;
height: 100px;
background-color: red;
transform: rotateY(45deg);
}
.child-element {
width: 405px;
height: 95px;
background-color: blue;
transform: rotateY(-45deg);
backface-visibility: hidden;
}
</style>
</head>
<body>
<h2>Transforming the Child Elements Using backface-visibility Property</h2>
<div class="parent-element">
<div class="child-element"></div>
</div>
</body>
</html>
结论
在保留 3D 变换的同时对子元素进行变换是 Web 开发者的一项必备技能。对子元素应用 3D 变换可能很复杂，确保父元素的变换得以保留至关重要。在本文中，我们探讨了三种在保留 3D 变换的同时对子元素进行变换的不同方法，包括使用 transform-style 属性、绝对位置和 backface-visibility 属性。每种方法都有其优缺点，开发者应该选择最适合其项目需求的方法。充分理解这些技术后，Web 开发者可以在其网页上创建视觉震撼、引人入胜的 3D 元素。
相关文章
有用资源
css 参考教程 - 该教程包含有关 css 的更多信息:https://www.cainiaomax.com/css/
