CSS3转换

转换

改变元素在页面中位置，大小，角度以及形状的一种方式

2D转换：只在x轴和y轴上发生转换效果

3D转换：增加了z轴的转换效果

 

一、转换属性

transform

取值：

    （1）none，默认值，无任何转换效果

    （2）transform-function 一个或多个转换函数，多个的话，中间用空格隔开

转换原点

transform-origin

取值：px为单位的数字

%
关键字 left/center/right  top/center/bottom

取值个数：2个值表示，表示原点在x轴和y轴上的位置，3个值 ，表示原点在x轴，y轴，z轴上的位置

 

二、2D转换

1、位移

改变元素在页面中的位置

属性：transform

取值：

    translate（x）：指定元素在x轴上的位移距离，+为由移，-为左移

    translate（x，y）：指定元素在x轴和y轴上位移距离，

    translateX（x），只设置x轴上的位移

    translateY（y），只设置y轴上的位移

2、缩放

改变元素在页面中的尺寸

transform

取值：

（1）scale（value）

                value 横向和纵向的缩放比例，默认为1

                >1,放大

                0<value<1缩小

                -1<value<0翻转缩小

                value<-1 翻转放大

（2）scale（value1，value2）

value1:x轴缩放比例

value2:y轴缩放比例

（3）scaleX（value1）

（4）scaleY（value1）

3、旋转

改变元素在页面的显示角度

transform:rotate(ndeg)

n为+：顺时针

n为-：逆时针

注意：

    （1）旋转是连同坐标一起旋转，会影响旋转之后的位移效果

    （2）旋转原点会影响最后旋转结果

4、倾斜

改变元素在页面中的形状

transform:skew(x)

skew（x）同skewX（x）

让元素向着x轴发生倾斜效果，x就是x轴与y轴的夹角

x：+   y轴逆时针倾斜

x：-   y轴顺时针倾斜

skewY（y）

让元素向着y轴发生倾斜效果，y就是x轴与y轴的夹角

y：+   x轴逆时针倾斜

y：-   x轴顺时针倾斜

东莞vi设计https://www.houdianzi.com/dgvi/ 豌豆资源网站大全https://55wd.com

5、3d

（1）透视距离‘模拟人的眼睛到3d转换元素之间的距离

perspective，此属性要加在转换元素的父元素上

（2）3D旋转

transform：

取值：

    rotateX（xdeg）：以x轴为中心，旋转元素的角度

    rotateY（ydeg）：以y轴为中心，旋转元素的角度

    rotateZ（ydeg）：以z轴为中心，旋转元素的角度

 

    rotate3D（x，y，z，ndeg），x，y，z取值大于0，表示参与旋转，取值为0表示不参与