perspective属性是不可继承的

利用CSS3可以进行3D变形，在相关的属性中，perspective用于定义一个元素所有子元素共享的透视深度，即观察者到屏幕的距离。如果没有设置这个属性或者设置有误，则浏览器无法显示立体效果。

在设置perspective属性时需要注意该属性是不能继承的。我测试了Firefox、Chrome和360三种浏览器，其中只有Firefox严格遵守规范。例如，在一个figure元素中嵌套了一个div元素，而这个div元素又包含一个img图像元素。

<figure>
    <div><img src="https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/6/13/172acd27e0435837~tplv-t2oaga2asx-image.image" id="rotate-y" /></div>
    <figcaption>绕Y轴旋转</figcaption>
</figure>

用如下CSS代码为页面设置样式。这里的透视深度被设置在figure元素上，按照规范的要求，该设置是不会继承到img元素的。所以，浏览器显示的正确结果应该是没有立体效果。

* {
  margin: 0;
  padding: 0;
}

figure {
  width: 150px;
  margin: 20px;
  perspective: 400px;
}

figure div {
  height: 150px;
  background-color: lightgreen;
}

figure div img {
  width: 100%;
}

figure figcaption {
  margin-top: 10px;
  text-align: center;
}

#rotate-y:hover {
  transition: transform 2s;
  transform: rotateY(45deg);
}

在下面这两幅图中，左图是Firefox的显示结果，右图则是Chrome和360的显示结果。可见，Firefox遵守CSS规范的程度应该更严格一些。

对于上面CSS的编码错误，只要将perspective的属性设置移到嵌套的div中，就可以在所有浏览器中获得相同的显示效果。修改后的代码如下：

figure {
  width: 150px;
  margin: 20px;
  /* perspective: 400px; */
}

figure div {
  height: 150px;
  background-color: lightgreen;
  perspective: 400px;
}