transform旋转,平移,缩放,扭曲 斜切

transform  改变
rotate 旋转
translate  位移
scale 缩放

skew  斜切变形

记得兼容性:
-webkit-
   -moz-
    -ms-
     -o-

transform: rotate(Xdeg,Ydeg);
deg 表示角度 X轴正半轴为0deg,顺时针旋转值越来越大。
transform-origin( X ,Y ); 设置对象旋转的中心点,如果没设置该值,默认transform-origin(50%,50%);

transform-origin(100px,200px); 设定旋转的中心点为,水平位移100px,垂直位移200px;
transform: rotate(45deg); 对象 以水平位移100px,垂直位移200px 为中心点旋转45度。

默认旋转中心为对象的正中心,即:图片长宽的50%。transform-origin:50% 50%;
rotate指定对象的2D旋转,指定对象指的是当前对象,也就是原元素,虽然子元素也会跟着动,
但是子元素并没有发生相对旋转,旋转一定要有一个旋转中心,所以需先有transform-origin属性的定义来确定旋转中心,
如果缺省,默认为transform-origin: 50% 50%。

transform:translate(X , Y);    px,vh,vw,%,rem,em,cm,mm等相对单位,绝对单位都有效。
X   相对图片左上角顶点,进行水平位移。
Y   相对图片左上角顶点,进行垂直位移。
transform: translate(200px);  ===  transform: translate(200px,0);
transform: translate(0,200px); 如果只让Y轴垂直位移,那么X轴参数不能省略。
只写一个参数那么默认X轴水平位移200px,Y轴不进行位移。

transform:translateX(x);
transform:translateY(x);
transform: scale( X , Y );
以对象的正中心为缩放中心,把对象进行缩放,这里是等比例缩放,对象不会变形,缩放对象包括图片,div等等。
transform: scaleX( .5 );     以对象的正中心为中心,水平缩放到宽度等于原来宽度的50%;
transform: scaleY( .5 );  以对象的正中心为中心,垂直缩放到高度等于原来高度的50%;
transform: scale( .5 , .5 ); 以对象的正中心为中心,水平垂直缩放到原来宽高的50%;
transform: scale( .5 );  ===  transform: scale( .5 , .5 );

=================

transform旋转,平移,缩放,扭曲 斜切

transform旋转,平移,缩放,扭曲 斜切

transform: rotate(Xdeg,Ydeg);
deg 表示角度 X轴正半轴为0deg,顺时针旋转值越来越大。
transform-origin( X ,Y ); 设置对象旋转的中心点,如果没设置该值,默认transform-origin(50%,50%);

transform-origin(100px,200px); 设定旋转的中心点为,水平位移100px,垂直位移200px;
transform: rotate(45deg); 对象 以水平位移100px,垂直位移200px 为中心点旋转45度。

默认旋转中心为对象的正中心,即:图片长宽的50%。transform-origin:50% 50%;
rotate指定对象的2D旋转,指定对象指的是当前对象,也就是原元素,虽然子元素也会跟着动,
但是子元素并没有发生相对旋转,旋转一定要有一个旋转中心,所以需先有transform-origin属性的定义来确定旋转中心,
如果缺省,默认为transform-origin: 50% 50%。

transform旋转,平移,缩放,扭曲 斜切

transform:translate(X , Y);    px,vh,vw,%,rem,em,cm,mm等相对单位,绝对单位都有效。
X   相对图片左上角顶点,进行水平位移。
Y   相对图片左上角顶点,进行垂直位移。
transform: translate(200px);  ===  transform: translate(200px,0);
transform: translate(0,200px); 如果只让Y轴垂直位移,那么X轴参数不能省略。
只写一个参数那么默认X轴水平位移200px,Y轴不进行位移。

兼容性问题:

-webkit-
   -moz-
    -ms-
     -o-

----------------------------

transform旋转,平移,缩放,扭曲 斜切

transform:translateX(x);
transform:translateY(x);
transform: scale( X , Y );
以对象的正中心为缩放中心,把对象进行缩放,这里是等比例缩放,对象不会变形,缩放对象包括图片,div等等。
transform: scaleX( .5 );     以对象的正中心为中心,水平缩放到宽度等于原来宽度的50%;
transform: scaleY( .5 );  以对象的正中心为中心,垂直缩放到高度等于原来高度的50%;
transform: scale( .5 , .5 ); 以对象的正中心为中心,水平垂直缩放到原来宽高的50%;
transform: scale( .5 );  ===  transform: scale( .5 , .5 );

实例1:
将一个width:1000px;height:500px;的元素缩放为width:300px;height:100px;,
scale缩放的参数是以1为基准的[sx,sy]缩放矢量参数,即宽度缩放为原元素的sx倍,高度缩放为原元素的sy倍。所以缩放的应该是transform: scale(300/1000, 100/500),但是scale()中不能用分数,所以正确答案是transform: scale(.3, .2)。

实例2:
原元素的宽高属性为width:1000px;height:500px;,执行transform: scale(.5);之后的变化表述正确的是?

scale缩放的参数是以1为基准的[sx,sy]缩放矢量参数,即宽度缩放为原元素的sx倍,高度缩放为原元素的sy倍。当第二个参数省略的时候,默认宽度和高度的缩放比例都和第一个参数一样,实现等比缩放。width:1000px和height:500px;执行transform: scale(.5);之后,width=1000px*.5=500px;height=500px*.5=250px
注意:
这里的缩放是针对元素对象本身,而不是其父元素。

===============================

transform旋转,平移,缩放,扭曲 斜切

transform旋转,平移,缩放,扭曲 斜切

transform旋转,平移,缩放,扭曲 斜切

transform旋转,平移,缩放,扭曲 斜切

transform: skewX( Xdeg );

transform旋转,平移,缩放,扭曲 斜切

已经定义对象div宽高如:width:300px;  height:200px;

如上图:transform: skewX( 30deg ); 可以理解为:

最重要的是:没变形之前,在对象的几何中心画X,Y轴,skew是相对它们进行角度旋转的。

对象以X正半轴为0deg,逆时针旋转30deg,两条宽度永远都与X轴平行,除了角度达到最大90deg/-90deg时,变成一条看不见的线。

高度永远为300px 。旋转最大角度(变成一条看不见的线)为 90deg 或 -90deg 。正度数就在X正半轴,负度数就在X负半轴。

transform旋转,平移,缩放,扭曲 斜切

同理:

transform: skewY(20deg); 理解:

最重要的是:没变形之前,在对象的几何中心画X,Y轴,skew是相对它们进行角度旋转的。

对象以Y正半轴为0deg,顺时针旋转20deg(跟X轴相反)。且高度永远跟Y轴平行,除了角度达到最大90deg/-90deg时,变成一条看不见的线。

宽度永远为200px。旋转最大角度(变成一条看不见的线)为 90deg 或 -90deg 。正度数就在Y正半轴,负度数就在Y负半轴。

transform: skew( 20deg );  ===  transform: skew(20deg , 0deg);

transform: skew( 0 , 20deg );  表示对象的Y轴旋转20度。

skew   X轴,Y轴的取值范围都是: 90deg ~ -90deg ;

X轴 以X正半轴为0deg,值逆时针越来越大。
Y轴 以Y正半轴为0deg,值顺时针越来越大。
Xdeg +  Ydeg = 90deg或-90deg  那么就变成看不到的一条直线。
使用元素审查,改变度数最好。

transform: skew(<angle> [, <angle>]);其中angle为倾斜角度,角度方向跟随极坐标角度方向,逆时针为正方向,顺时针为负方向。当只有一个参数的时候,第二个参数默认为0deg,因此transform: skew(45deg);为元素的水平方向逆时针倾斜45度,竖直方向倾斜0度

transform旋转,平移,缩放,扭曲 斜切

==========================

transform旋转,平移,缩放,扭曲 斜切

在transform: rotate3d(x, y, z, angle);中,第一个参数表示X轴,第二个参数表示Y轴,第三个参数表示Z轴,其中0为该方向不旋转,大于0为正方向旋转(顺时针),小于0为负方向旋转(逆时针),第四个参数表示旋转的角度,参数不允许省略。

transform旋转,平移,缩放,扭曲 斜切

transform旋转,平移,缩放,扭曲 斜切

transform旋转,平移,缩放,扭曲 斜切

需要把一个宽度为1000像素和高度为250像素的元素缩放为宽度为500像素、高度为500像素

scale3d(sx,sy,sz),sx为横向缩放比例;sy为纵向缩放比例;sz为z轴缩放比例,参数不允许省略,无缩放比例为1,宽度1000px缩放为500px,宽度变成原来的一半,即1000*0.5=500px,高度250px变成500px,增加了一半,因此250*2=500px;z轴没有缩放,参数不能省略,使用1表示无缩放。因此transform: scale3d(.5, 2, 1)正确。

transform旋转,平移,缩放,扭曲 斜切

transform旋转,平移,缩放,扭曲 斜切

上一篇:实现一个类 RequireJS 的模块加载器 (二)


下一篇:使用docker创建MySQL容器,并在springboot中使用