css的空间转换

126 阅读1分钟

空间转换 空间:是从坐标轴角度定义的。 x 、y 和z三条坐标轴构成了一个立体空间,z轴位置与视线方向相同。 空间转换也叫3D转换 属性:transform 语法 1.transform: translate3d(x, y, z); 2.transform: translateX(值); 3.transform: translateY(值); 4.transform: translateZ(值); 取值(正负均可) 像素单位数值 百分比 透视 属性(添加给父级) perspective: 值; 取值:像素单位数值, 数值一般在800 – 1200 空间旋转 语法 transform: rotateZ(值); transform: rotateX(值); transform: rotateY(值); rotate3d(x, y, z, 角度度数) :用来设置自定义旋转轴的位置及旋转的角度 x,y,z 取值为0-1之间的数字 左手法则 判断旋转方向: 左手握住旋转轴, 拇指指向正值方向, 手指弯曲方向为旋转正值方向 立体呈现 给父元素添加 transform-style: preserve-3d; 空间缩放 语法 transform: scaleX(倍数); transform: scaleY(倍数); transform: scaleZ(倍数); transform: scale3d(x, y, z

);