您的位置：首页 > Web前端 > CSS

CSS之Transform

2016-05-28 00:00 519 查看

摘要: 读书笔记

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

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

-webkit-transform

-moz-transform

-o-transform

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

一、旋转(rotate)

[code=language-html]<!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)

[code=language-html]<!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)

[code=language-html]<!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)

[code=language-html]<!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函数会改变元素的形状。

五、变形

[code=language-html]<!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属性进行定义。

[code=language-html]<!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等描述性关键字。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航