文档章节

CSS之Transform

我是偶哦
 我是偶哦
发布于 2016/05/28 10:46
字数 984
阅读 101
收藏 2

行业解决方案、产品招募中!想赚钱就来传!>>>

我们利用css3中的transform可以实现文字或图像的旋转、缩放、倾斜和移动四种类型的变形处理。

本文使用的是标准的transform,亦可以使用各个浏览器对应私有的属性。对应如下

  • -webkit-transform
  • -moz-transform
  • -o-transform

不过在我的电脑上用transform效果相同,Chrome 49  Firefox 46 IE 10

一、旋转(rotate)

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        img:hover{
            transform: rotate(90deg);
        }
    </style>
</head>
<body>
    <img src="http://dl.bizhi.sogou.com/images/2012/03/23/107607.jpg?f=download">
</body>
</html>

语法格式如下:

    rotate(angle)

旋转角度单位有:

  •  deg    指角度制,一周的角度是360°,直角是90°
  •  grad   指百分度制,一周的角度是400,直角是100
  •  turn     圈, 1turn代表旋转一圈
  •  rad     指弧度制,一周的角度是2π,直角是π/2   

转换比例为: 90deg = 100grad = 0.25turn ≈ 1.570796326794897rad

二、缩放(scale)

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        img:hover{
            transform: scale(1,-1)
        }
    </style>
</head>
<body>
    <img src="http://dl.bizhi.sogou.com/images/2012/03/23/107607.jpg?f=download">
</body>
</html>

语法格式如下:

    scale(number,[number2])

number2是可选的,如果未设置,则与默认与number相同。number可以为正数、负数、小数。

我们将number分为两部分,正负号(+,-)和数值(number的绝对值)。负号(-)意味着元素要被旋转180度,数值部分大于1则放大,小于一则缩小,等于一既不放大又不缩小,为零时消失。

三、移动(translate)

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        img:hover{
            transform: translate(2in,5cm)
        }
    </style>
</head>
<body>
    <img src="http://dl.bizhi.sogou.com/images/2012/03/23/107607.jpg?f=download">
</body>
</html>

语法格式如下:

    translate(value1,[value2])

第一个参数表示相对于原位置X轴偏移距离,第二个参数表示相对于Y轴偏移个距离,如果省略了第二个参数,则默认为0。正数向右和下偏移,负数向左和上偏移。

距离的单位有:

  • 绝对长度单位
    • px   
    • in     
    • cm   
    • mm  
  • 相对字体长度单位
    • em
    • rem
    • pt
    • pc
    • ex
    • ch
  • 可视区百分比长度单位
    • vw
    • vh
    • vmin
    • vmax
  • 离奇的长度单位
    • %(百分比)

关于这些长度单位,这有一篇很好的介绍链接http://www.w3cplus.com/css/the-lengths-of-css.html,本段也是参照此链接,不过提示大家,浏览器的版本也在不断的迭代,有些特性需要自己去验证,比如vmax属性在我的chrome浏览器下也行正常运行。

四、倾斜(skew)

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        img:hover{
            transform: skew(30deg,-0.1turn)
        }
    </style>
</head>
<body>
    <img src="http://dl.bizhi.sogou.com/images/2012/03/23/107607.jpg?f=download">
</body>
</html>

语法格式:

    skew(angle,[angle])

第一个参数表示相对于X轴进行倾斜,第二个参数相对于Y轴进行倾斜,如果省略了第二个参数,则默认为0。

rotate函数只是旋转,不改变元素的形状,但skew函数会改变元素的形状。

五、变形

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        img:hover{
            transform: matrix(1,0.4,0,1,0,0)
        }
    </style>
</head>
<body>
    <img src="http://dl.bizhi.sogou.com/images/2012/03/23/107607.jpg?f=download">
</body>
</html>

matrix()函数是一个3x3的矩阵,将旧的参数转换成新的参数。

目前,我对此也不是很了解,大家如有兴趣自行Google。

六、Transform-origin

CSS变形的原点默认是对象的中心点,如果要改变这个中心点,可以使用transform-origin属性进行定义。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        img:hover{
            /*以左上角为原点旋转*/
            transform-origin: top left;
            transform: rotate(30deg);
        }
    </style>
</head>
<body>
    <img src="http://dl.bizhi.sogou.com/images/2012/03/23/107607.jpg?f=download">
</body>
</html>

语法格式:

    transform-origin:[ [ <percentage> | <length> | left | center | right ][ <percentage> | <length> | top | center | buttom ] ? ] | [ [ left | center | right ] || [ top | center | bottom ]]

transform-origin属性的初始值是50%,50%,使用与块状元素和内联元素。transform-origin接受连个参数,他们可以是百分比、em、px等具体值也可以是left、center、right,或者top、middle、bottom等描述性关键字。

 

我是偶哦
粉丝 6
博文 32
码字总数 21607
作品 0
深圳
私信 提问
加载中
请先登录后再评论。
CSS Browser Selector

CSS Browser Selector 是一个小的 JS 库,可增强 CSS 的选择器功能,支持根据不同的操作系统和浏览器来编写指定的 CSS 代码,可检测浏览器、浏览器版本、平台、平台版本、设备、设备版本、m...

匿名
2013/01/17
2.8K
1
Web开发组件管理器--Bower

Bower 是一个针对Web开发的包管理器。该工具主要用来帮助用户轻松安装CSS、JavaScript、图像等相关包,并管理这些包之间的依赖。 功能有些类似于Component。不同之处是,Component是围绕Git...

匿名
2013/02/01
1.2W
2
网页抓取工具 --pyrailgun

这是一个非常简单易用的抓取工具 怎么使用? 首先你需要创建一个对应站点的规则文件 比如test.json { } 然后在代码里面把它作为一个任务加入到railgun from railgun import RailGun railgun =...

baizhongwei
2013/02/28
7.8K
0
Chrome页面自动刷新插件--smartF5

smartF5是一款chrome插件,用以实现监控页面资源,并自动刷新。 特别适合双屏情况下的DEMO开发,大大提高页面开发效率。 让你键盘上的F5键退休吧! 为什么选择smartF5 本插件具有以下特色: ...

YanisWang
2013/04/04
1.2W
0
jQuery仿亚马逊风格图片滚动插件--amazon_scroller.js

亚马逊是美国甚至是全世界最大的网络电子商务公司,它的网站也相对简单,不花哨。这款图片滚动效果正是模仿自亚马逊网站,自定义参数比较多,可以设置图片滚动间隔、是否显示标题、图片大小、...

dowebok
2013/04/04
2.2K
1

没有更多内容

加载失败,请刷新页面

加载更多

什么是移动语义? - What is move semantics?

问题: I just finished listening to the Software Engineering radio podcast interview with Scott Meyers regarding C++0x . 我刚刚结束了对Scott Meyers进行的有关C ++ 0x的Software En......

技术盛宴
54分钟前
24
0
算法与数据结构体系课

算法与数据结构体系课【超清原画】 下载地址:百度云盘 从0到工作5年,面试、进大厂、搭建知识体系、拓展技术上限 你不再需要其它算法与数据结构课程了 为什么学算法已经是一个不应该问的问题...

1930133570
今天
21
0
如何停止跟踪并忽略对Git中文件的更改? - How to stop tracking and ignore changes to a file in Git?

问题: I have cloned a project that includes some .csproj files. 我已经克隆了一个包含一些.csproj文件的项目。 I don't need/like my local csproj files being tracked by Git (or bei......

富含淀粉
今天
25
0
Redis阻塞

可能存在问题 内在原因:API或数据结构使用不合理、CPU饱和、持久化阻塞等 外在原因:CPU竞争、内存交换、网络问题等 问题处理: API或数据结构使用不合理,可能存在慢查询或者大对象: 发现...

游泳鸟
今天
17
0
OSChina 周五乱弹 —— 来人,上幼儿园老师跳舞的图!

Osc乱弹歌单(2020)请戳(这里) 【今日歌曲】 小小编辑:《奇跡の海》- 坂本真綾 《奇跡の海》- 坂本真綾 手机党少年们想听歌,请使劲儿戳(这里) 巴蜀(@巴拉迪维)最近有点闹心了, @巴...

小小编辑
今天
64
1

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部