CSS转动与旋转应用示例详解

2021-03-08 07:50 jianzhan
1个新项目中要画1个图,有横座标和纵座标,纵座标必须文本转过来竖排,baidu了1圈,寻找1篇文章内容,有效,转载过来备查

css 2.0還是沒有旋转的,3.0里边有rotate特性,这个能够把元素开展随意角度转动,灰常强劲。除这个rotate,也有1个scale,1般用法文件格式是

-moz-transform:scale(1,1);

括弧里边(1,1)前者表明X轴,后者表明Y轴,当数据超过1时变大,超过0并小于1时变小,很好了解,那末负数是如何的实际效果?回答是 旋转 。

-moz-transform:scale(⑴,1);

表明水平旋转;

-moz-transform:scale(1,⑴);

表明竖直旋转。

但是这些全是moz或webkit的,万恶的IE如何办?
因而大家想起滤镜,滤镜里边有这么1堆物品:

顺时针转动照片90度
picID.style.filter="progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";
转动180度
picID.style.filter="progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";
逆时针转动90度
picID.style.filter="progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";

有木有想问“rotation=4”甚么实际效果? 面壁去...90、180、270都出来了,还要rotation=4完成360干吗,觉得这个很费呢。但是这个是静态数据费,假如动态性的话,这个便是务必的了。倘若用js操纵元素转动,从0顺时针旋到270的情况下,假如沒有360的话,那末270会迅速的逆时针返回0,这样就2了,因此要给个360过渡,让270当然到360,随后再循环系统,这样就顺畅了……

这跟css3的rotate类似,但是只能固定不动角度的转动,来个顺时针15度就没折了,css的确很轻轻松松的transform:rotate(15deg);

但是这样也只是完成了“转动”,也有“旋转”没完成。IE的旋转就必须用到这个:

水平旋转:filter:FlipH;
竖直旋转:filter:FlipV;

这样就齐全了

实际编码:
1、水平旋转

拷贝编码
编码以下:

-moz-transform:scale(⑴,1);
-webkit-transform:scale(⑴,1);
-o-transform:scale(⑴,1);
transform:scale(⑴,1);
filter:FlipH;

2、竖直旋转

拷贝编码
编码以下:

-moz-transform:scale(1,⑴);
-webkit-transform:scale(1,⑴);
-o-transform:scale(1,⑴);
transform:scale(1,⑴);
filter:FlipV;

3、顺时针转动90度

拷贝编码
编码以下:

-moz-transform:rotate(90deg);
-webkit-transform:rotate(90deg);
-o-transform:rotate(90deg);
transform:rotate(90deg);
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);