在CSS3中，确实有一些属性可以用来创建3D效果和调整景深。主要的属性包括perspective和transform系列属性。下面分别介绍这些属性的使用方法和使用场景。
perspective
perspective属性用于为3D空间中的元素设置景深。它决定了观察者与元素之间的距离，从而影响3D变换的透视效果。
语法
.parent {
perspective: 1000px;
}
使用场景
perspective通常用于3D效果，比如旋转、缩放和倾斜等变换。通过调整perspective值，可以模拟更逼真的3D场景。较小的值会导致更强烈的透视效果，而较大的值会产生较为平缓的效果。
transform 和 transform-style
transform属性允许你对元素进行2D或3D转换。你可以使用它来移动、旋转、缩放和倾斜元素。而transform-style属性决定了子元素是否在3D空间中保留其位置。
语法
.element {
transform: rotateY(45deg);
transform-style: preserve-3d;
}
使用场景
- transform: 当你需要对元素进行2D或3D变换时使用，比如旋转、缩放、平移等。
- transform-style: 当你需要嵌套的子元素也参与3D变换时使用。
preserve-3d值使得子元素保留其3D位置，而默认值flat则会忽略3D效果。
perspective-origin
perspective-origin属性用于设置3D效果的原点，默认值是元素的中心点。
语法
.parent {
perspective-origin: left top;
}
使用场景
用于调整观察者的视角，改变透视效果的消失点。
综合使用示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D Transformations</title>
<style>
.container {
perspective: 1000px;
perspective-origin: center;
}
.box {
width: 100px;
height: 100px;
background-color: red;
transform-style: preserve-3d;
transform: rotateY(45deg);
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
</div>
</body>
</html>
在这个示例中，.container设置了perspective属性来定义3D效果的景深。.box通过transform属性进行3D旋转，并且使用transform-style: preserve-3d使其子元素（如果有）也保持3D效果。
区别总结
perspective主要用于设置观察者与元素之间的距离，从而影响3D变换的透视效果。transform用于对元素进行具体的2D或3D变换，如旋转、缩放、移动等。transform-style决定子元素是否在3D空间中保留其位置。
希望这些信息能够帮助你理解和使用CSS3中的3D效果和景深配置。
标签：style,元素,transform,perspective,3D,属性 From： https://www.cnblogs.com/zsnhweb/p/18383565