移动web第二天-空间转换

122 阅读1分钟

一.空间位移

image.png 1.translate3d(X,Y,Z)可以连写

二.透视效果

image.png

/* 透视,视距,景深 设置给使用了3d元素的最近一级的父元素(亲爸爸) */

1.pp给具有3d属性的盒子的最近一级父元素添加

2.视距pp:400px~1200px

perspective: 800px;具有近大远小,近实远虚的效果

三.空间旋转

image.png 1.可一起设置,也可单独设置(记得给父元素添加pp)

2.所谓的“上帝视角,即通过旋转产生视角”

例:transform:rotateX(-30deg) rotateY(-30deg);

3./* 开启 3D */

transform-style: preserve-3d;(tfs,做3D效果的必须属性)