CSS3-3D技术

2024-09-02 20:53:29

CSS3-3D技术

transform翻译成汉语具有"变换"或者"改变"的意思。

此属性具有非常强大的功能，比如可以实现元素的位移、拉伸或者旋转等效果，

最能体现transform 属性强大实力的是实现元素的3D变换效果。

transform 功能函数：

1、位移translate

transform: translate(x , y) 2d

transform:translateX();

transform:translateY();

transform:translateZ(不能写百分比，只能写具体的数值); 3d

transform: translate3d(x , y , z); 3d

2、旋转rotate

transform: rotate(); 2d

transform: rotateX();

transform: rotateY();

transform: rotateZ(); 3d

transform: rotate3d(x,y,z,a); 3d

0 ：不旋转；1：旋转；

x：是一个0到１之间的数值，主要用来描述元素围绕X轴旋转的矢量值；

y：是一个0到１之间的数值，主要用来描述元素围绕Y轴旋转的矢量值；

z：是一个0到１之间的数值，主要用来描述元素围绕Z轴旋转的矢量值；

a：是一个角度值，主要用来指定元素旋转的角度，正值顺时针旋转，负值逆时针旋转。

3、缩放scale

transform: scale3d(x , y , z); 3d

transform: scale(x,y) 2d

transform: scaleX();

transform: scaleY();

transform: scaleZ(); 3d

4、设置空间transform-style

transform-style：flat；处在2D空间里（默认值）

transform-style：preserve-3d；处在3D空间里

5、景深perspective

perspective:200px; （父元素）

transform:perspective(1200px) （在子元素中使用）

离屏幕多远的距离去观察元素，两个都设置会发生冲突，建议只设置父元素，通常的数值在900-1200之间，当视线距离物体足够远的时候，基本上就不会有近大远小的感觉。

6、原点persnpective-origin

persnpective-origin：值1 值2；(父元素)

原点设置，基点位置，观察3d元素的（位置）角度。

值可以是px % left top right bottom。

7、旋转元素的基点位置transform-origin

transform-origin：x y z；设置旋转元素的基点位置，z 不能设置%；

transform-origin ：50% 50% 0；（默认值）

最新文章

热门文章