在CSS3中,可以利用transform功能来实现文字或图像的旋转、缩放、倾斜、移动这四种类型的变形处理,本文将对此做详细介绍。

一.旋转 rotate

用法:transform: rotate(45deg);

共一个参数“角度”,单位deg为度的意思,正数为顺时针旋转,负数为逆时针旋转,上述代码作用是顺时针旋转45度。

二.缩放 scale

用法:transform: scale(0.5)  或者  transform: scale(0.5, 2);

参数表示缩放倍数;

  • 一个参数时:表示水平和垂直同时缩放该倍率
  • 两个参数时:第一个参数指定水平方向的缩放倍率,第二个参数指定垂直方向的缩放倍率。

三.倾斜 skew

用法:transform: skew(30deg)  或者 transform: skew(30deg, 30deg);

参数表示倾斜角度,单位deg

  • 一个参数时:表示水平方向的倾斜角度;
  • 两个参数时:第一个参数表示水平方向的倾斜角度,第二个参数表示垂直方向的倾斜角度。

关于skew倾斜角度的计算方式表面上看并不是那么直观,这里借鉴某大拿绘制的图举例说明一下:

首先需要说明的是skew的默认原点transform-origin是这个物件的中心点

skewX(30deg) 如下图:

skewY(10deg) 如下图:

skew(30deg, 10deg) 如下图:

我当初就是看到此图瞬间理解的。

四.移动 translate

用法:transform: translate(45px)  或者 transform: skew(45px, 150px);

参数表示移动距离,单位px,

  • 一个参数时:表示水平方向的移动距离;
  • 两个参数时:第一个参数表示水平方向的移动距离,第二个参数表示垂直方向的移动距离。

五.基准点 transform-origin

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

用法:transform-origin: 10px 10px;

共两个参数,表示相对左上角原点的距离,单位px,第一个参数表示相对左上角原点水平方向的距离,第二个参数表示相对左上角原点垂直方向的距离;

两个参数除了可以设置为具体的像素值,其中第一个参数可以指定为left、center、right,第二个参数可以指定为top、center、bottom。

六.多方法组合变形

上面我们介绍了使用transform对元素进行旋转、缩放、倾斜、移动的方法,这里讲介绍综合使用这几个方法来对一个元素进行多重变形。

用法:transform: rotate(45deg) scale(0.5) skew(30deg, 30deg) translate(100px, 100px);

这四种变形方法顺序可以随意,但不同的顺序导致变形结果不同,原因是变形的顺序是从左到右依次进行,这个用法中的执行顺序为1.rotate  2.scalse  3.skew  4.translate

注:浏览器支持性不做介绍,具体使用时请做具体测试,本人秉着早晚所有浏览器都会支持的态度写此文。

转载自:http://www.aspnetjia.com/Cont-94.html

CSS3属性transform详解的更多相关文章

  1. CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)

    CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)   在CSS3中,可以利用transform功能来实现文字或图像的旋转.缩放.倾 ...

  2. CSS3属性transform详解【转载】

    CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)   在CSS3中,可以利用transform功能来实现文字或图像的旋转.缩放.倾 ...

  3. CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)(转载)

    在CSS3中,可以利用transform功能来实现文字或图像的旋转.缩放.倾斜.移动这四种类型的变形处理,本文将对此做详细介绍. 一.旋转 rotate 用法:transform: rotate(45 ...

  4. CSS3教程:pointer-events属性值详解 阻止穿透点击

    转:http://www.poluoluo.com/jzxy/201109/142876.html 在某个项目中,很多元素需要定位在一个地图层上面,这里就要用到很多绝对定位或者相对定位的元素,但是这样 ...

  5. css3系列之transform详解translate

    translate translate这个参数的,是transform 身上的,那么它有什么用呢? 其实他的作用很简单,就是平移,参考自己的位置来平移 translate() translateX() ...

  6. css3系列之详解perspective

    perspective 简单来说,就是设置这个属性后,那么,就可以模拟出像我们人看电脑上的显示的元素一样.比如说, perspective:800px   意思就是,我在离屏幕800px 的地方观看这 ...

  7. 第94天:CSS3 盒模型详解

    CSS3盒模型详解 盒模型设定为border-box时 width = border + padding + content 盒模型设定为content-box时 width = content所谓定 ...

  8. pointer-events属性值详解

    其实早知道这个属性,但是一直没有去研究过.今天正好在twitter看到这个词,就去研究了下,正好解决了目前遇到的一个小难题,所以分享下.嗯,其实这是个比较简单的CSS3属性. 在某个项目中,很多元素需 ...

  9. Delphi中TStringList类常用属性方法详解

    TStrings是一个抽象类,在实际开发中,是除了基本类型外,应用得最多的. 常规的用法大家都知道,现在来讨论它的一些高级的用法. 先把要讨论的几个属性列出来: 1.CommaText 2.Delim ...

随机推荐

  1. 生成二维码 打上自定义logo

    private void RenderQrCode(string Code) { try { string level = "Q"; string url = ZConfig.Ge ...

  2. 同时大量连接导致的DDOS攻击,导致收发器宕机,用户大面积超时掉线

    前段时间一个客户改成电信网通自动路由后(当然和这个没有关系,但是客户一般没有分析能力,会多想),用户经常大面积掉线,用户才180多个,在线最多也才120多,十分苦恼,原先帮其维护的技术人员,只是远程诊 ...

  3. Android 模拟器检测

    参考链接:https://github.com/MindMac/HideAndroidEmulator 从多个方面识别模拟器1.用户习惯:联系人数量.短信数量.相册里面照片数量.安装的应用2.从IME ...

  4. jQuery插件:模拟select下拉菜单

    没搞那么复杂,工作中,基本够用.. <!doctype html> <html> <head> <meta charset="utf-8" ...

  5. Amazon的Fire Phone之于Android开发者

    在上周Amazon也耐不住加入了手机竞争行列之中,发布了自己的Fire Phone,于是Android家族又多了一位变种成员,Android系统的碎片化程度也进一步加剧.因为工作的关系,我有幸在上个月 ...

  6. WindowsCE project missing - 转

    00x0 前言 之前在Windows 7系统中开发的WindowsCE项目,最近换成Windows 10系统,需要将项目进行修改,打开项目后提示如下错误: 无法读取项目文件“App.csproj”.. ...

  7. TIB自动化测试快讯 - Appium手机自动化测试学习资料精选

    TIB自动化测试快讯 - Appium手机自动化测试学习资料精选   Appium+Android+Javahttp://automationqa.com/forum.php?mod=viewthre ...

  8. 让Windows 7变成WIFI热点

    360要推便携路由器,个人觉得其主要目的是盯住了用户无线设备上的信息.因为如果用户移动设备都通过它这个路由器走的话,未加密的数据全部在他掌控之中. 其实Windows 7以上的系统是非常容易建立无线热 ...

  9. QT在windows下实现截屏操作并保存为png图片

    QPixmap originalPixmap = QPixmap::grabWindow(QApplication::desktop()->winId()); QString format = ...

  10. location.hash属性介绍

    location.hash属性介绍 例如URL: http://wwww.a.com/index#rhythmk 通过location.hash 我们将获取到 #rhythmk. 默认浏览器会滚动至i ...