CSS3

CSS3 中的 perspective 属性用于设置元素距视图的距离，单位为像素（px）； 设置了 perspective 属性的子元素可以实现透视效果（就是由远及近的效果），设置该属性的元素本身没有。

透视只是视觉上呈现出有近大远小的效果， 实际上还是在一个平面中；透视并不是真正的 3D 盒子， 无法构成真正 3D 空间。

示例：

CSS:

.box {width: 400px;height: 400px;margin: 20px auto;background: skyblue;/* 设置透视，实现近大远小的效果 */perspective: 800px;border: 1px solid gray;
}.section {width: 200px;height: 200px;margin: 100px;/* 设置转换的基点 */transform-origin: right;/* 过渡 */transition: transform 1s;background-color: #f00;
}.section:hover {transition: transform 1s;/* 沿 Y 轴旋转 */transform: rotateY(100deg);
}

HTML:

<div class="box"><div class="section"></div>
</div>