[TOC] # transform-style 指定嵌套元素如何在3D空间呈现,主要有两个属性值: flat和`preserve-3d` 其中flat值为默认值,表示所有子元素在2D平面呈现 `preserve-3d`表示所有子元素在3D空间呈现 ~~~ <style> body { /* perspective指定了观察者与 z=0 平面的距离，使具有三维位置变换的元素产生透视效果 */ perspective: 1000px; } div { width: 100px; height: 145px; border: 1px solid red; margin: 100px auto; transform: rotateY(30deg); transform-style: preserve-3d; } div img { transform: rotateY(30deg); } </style> <div> <img src="images//2.jpg" alt="" width="100px"> </div> ~~~