<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <!--景深的作用： 是一个作用于z轴的属性 1、让3D场景有近大远小的效果（就是肉眼距离屏幕的距离） 2、是一个不可以继承的。但他可以作用于后代元素（不是作用于本身的） 原理： 景深越大，灭点越远，元素变形更小 景深越小，灭点越近，元素变形更大 灭点：灭点就是你看到的尽头 景深基点：视角的位置 perspective-origin 50% 50% 参照盒模型 组合变换的话，放本身的话，一定要放在首位，就是组合的话就不需要在祖先元素定义了 transform-style 营造有层级的3d舞台 是一个不可继承属性，他作用于子元素 景深是会叠加的，就是因为是作用于后代元素的，所以祖先元素都会产生叠加 --> <style type="text/css"> *{ margin: 0; padding: 0; } #wrap{ width: 400px; height: 400px; position: absolute; top: 50%; left: 50%; margin-left: -200px; margin-top: -200px; border: 1px solid black; transform-style: preserve-3d; perspective-origin: ; } #inner{ width: 200px; height: 200px; position: absolute; top: 50%; left: 50%; margin-left: -100px; margin-top: -100px; border: 1px solid pink; border-radius: 50%; text-align: center; line-height: 200px; font-weight: bold; transition: 2s; transform: rotateX(120deg) translateZ(100px); } </style> </head> <body> <div id="wrap"> <div id="inner"> Rainbow </div> </div> </body> </html>