源码论坛公告:本站是一个交流学习建站资源的社区论坛,旨在交流学习源码脚本等资源技术,欢迎大家投稿发言! 【点击此处将锦尚放在桌面

源码论坛,商业源码下载,尽在锦尚中国商业源码论坛

 找回密码
 会员注册

QQ登录

只需一步,快速开始

查看: 7824|回复: 0

[CSS/Html] css3中transform属性实现的4种功能详解,看完必会

[复制链接]

1175

主题

1564

帖子

9020

金币

超级版主

Rank: 8Rank: 8

积分
19728
发表于 2022-5-11 15:03:55 | 显示全部楼层 |阅读模式

在CSS3中,可以利用transform功能实现文字或图像的旋转、缩放、倾斜、移动这4中类型的变形处理。

1、浏览器支持

到目前为止:Safari3.1以上、Chrome8以上、Firefox4以上、Opera10以上浏览器支持该属性。  

2、旋转

使用rotate方法,在参数中加入角度值,角度值后面跟表示角度单位的“deg”文字即可,旋转方向为顺时针方向。

  1. transform:rotate(45deg);
复制代码


3、缩放

使用scale方法来实现文字或图像的缩放处理,在参数中指定缩放倍率。


  1. transform:scale(0.5);//缩小一半
复制代码

(1)可以分别指定元素的水平方向的放大倍率与垂直方向的放大倍率


  1. transform:scale(0.5,2);//水平方向缩小一半,垂直方向放大一倍。
复制代码


4、倾斜

使用skew方法实现文字或图像的倾斜处理,在参数中分别指定水平方向上的倾斜角度与垂直方向上的倾斜角度。

  1. transform:skew(30deg,30deg);//水平方向上倾斜30度,垂直方向上倾斜30度。
复制代码

(1)只使用一个参数,省略另一个参数

这种情况下视为只在水平方向上进行倾斜,垂直方向上不倾斜。

  1. transform:skew(30deg);
复制代码


5、移动

使用translate方法来移动文字或图像,在参数中分别指定水平方向上的移动距离与垂直方向上的移动距离。

  1. transform:translate(50px,50px);//水平方向上移动50px,垂直方向上移动50px
复制代码

(1)只使用一个参数,省略另一个参数

这种情况下视为只在水平方向上移动,垂直方向上不移动。

  1. transform:translate(50px);
复制代码


6、对一个元素使用多种变形的方法  

  1. transform:translate(150px,200px)rotate(45deg)scale(1.5);
复制代码


7、指定变形的基准点

在使用transform方法进行文字或图像变形的时候,是以元素的中心点为基准点进行变形的。

transform-origin属性

使用该属性,可以改变变形的基准点。

  1. transform:rotate(45deg);
  2. transform-origin:leftbottom;//把基准点修改为元素的左下角
复制代码


1)指定属性值
基准点在元素水平方向上的位置:left、center、right
基准点在元素垂直方向上的位置:top、center、bottom

8、3D变形功能

(1)旋转

分别使用rotateX方法、rotateY方法、rotateZ方法使元素围绕X轴、Y轴、Z轴旋转,在参数中加入角度值,角度值后面跟表示角度单位的deg文字即可,旋转方向为顺时针旋转。

  1. transform:rotateX(45deg);
  2. transform:rotateY(45deg);
  3. transform:rotateZ(45deg);
  4. transform:rotateX(45deg)rotateY(45deg)rotateZ(45deg);
  5. transform:scale(0.5)rotateY(45deg)rotateZ(45deg);
复制代码


(2)缩放

分别使用scaleX方法、scaleY方法、scaleZ方法使元素按X轴、Y轴、Z轴进行缩放,在参数中指定缩放倍率。

  1. transform:scaleX(0.5);
  2. transform:scaleY(1);
  3. transform:scaleZ(2);
  4. transform:scaleX(0.5)scaleY(1);
  5. transform:scale(0.5)rotateY(45deg);
复制代码


(3)倾斜

分别使用skewX方法、skewY方法使元素在X轴、Y轴上进行顺时针方向倾斜(无skewZ方法),在参数中指定倾斜的角度

transform:skewX(45deg);
transform:skewY(45deg);

(4)移动

分别使用translateX方法、translateY方法、translateZ方法、使元素在X轴、Y轴、Z轴方向上进行移动,在参数中加入移动距离。

transform:translateX(50px);
transform:translateY(50px);
transform:translateZ(50px);

9、变形矩阵

每种变形方法的背后都存在着一个对应的矩阵。

(1)计算2D变形(3X3矩阵)

  1. \begin{bmatrix}a&c&e\\b&d&f\\0&0&1\end{bmatrix}
复制代码


可以将这个2D变形矩阵书写为matrim(a,b,c,d,e,f),a~f均代表一个数字,用于决定怎样执行变形处理。

(2)平移的2D矩阵

  1. \begin{bmatrix}1&0&tx\\0&1&ty\\0&0&1\end{bmatrix}
  2. //效果一致:右移150px,下移150px
  3. transform:matrix(1,0,0,1,150,150);
  4. transform:translate(150px,150px);
复制代码


(3)计算3D变形

3D缩放变形使用的4X4矩阵

  1. \begin{bmatrix}sx&0&0&0\\0&sy&0&0\\0&0&sz&0\\0&0&0&1\end{bmatrix}
  2. transform:matrix3d(sx,0,0,0,0,sy,0,0,0,0,sz,0,0,0,0,1);
  3. //效果一致:X轴方向上缩小五分之一,Y轴方向上缩小一半。
  4. transform:scale3d(0.8,0.5,1);
  5. transform:matrix3d(0.8,0,0,0,0,0.5,0,0,0,0,1,0,0,0,0,1);
复制代码


将需要的变形矩阵相乘得到一个新的变形矩阵可实现该处理。

到此这篇关于css3中transform属性实现的4种功能的文章就介绍到这了,更多相关css3中transform属性实现内容请搜索本站内容

您需要登录后才可以回帖 登录 | 会员注册

本版积分规则

锦尚中国源码论坛

聚合标签|锦尚中国,为中国网站设计添动力 ( 鲁ICP备09033200号 ) |网站地图

GMT+8, 2024-10-15 05:27 , Processed in 0.111249 second(s), 25 queries .

带宽由 锦尚数据 提供 专业的数据中心

© 锦尚中国源码论坛 52jscn Inc. 非法入侵必将受到法律制裁 法律顾问:IT法律网 & 褚福省律师 锦尚爱心 版权申诉 版权与免责声明