理解:translate rotate 与 perspective 暧昧关系

没有做浏览器兼容,请使用chrome浏览器查看。

在没有使用【perspective】和【transform-style:preserve-3d】的情况下

translateZ(60px)

translateY(-10px)

translateY(-10px) translateZ(50px)

translate3d(15px,-10px,50px)

rotateX(30deg);

rotateY(45deg);

rotateZ(15deg);

rotateX(45deg) translateZ(50px);

rotateY(45deg) rtranslateZ(50px)

上面的区域是由舞台(带阴影的整个大div),容器(舞台内每个小块),目标(绿色背景的div)基本html目录构成

选择在【舞台】【容器】【目标】增加相应的{perspective:800px}和{transform-style:preserve-3d}

增加{perspective: 800px;}CSS属性
增加{transform-style:preserve-3d;}CSS属性
增加{ transform:rotateX(25deg) rotateY(45deg)} CSS属性