CSS之Transform

时间 2019-11-11

标签 css transform 栏目 CSS 繁體版

原文原文链接

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

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

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

不过在个人电脑上用transform效果相同，Chrome 49 Firefox 46 IE 10css3

1、旋转(rotate)web

<!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>

语法格式以下：chrome

rotate(angle)浏览器

旋转角度单位有：函数

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

转换比例为： 90deg = 100grad = 0.25turn ≈ 1.570796326794897rad字体

2、缩放(scale)code

<!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>

语法格式以下：orm

scale(number,[number2])

number2是可选的，若是未设置，则与默认与number相同。number能够为正数、负数、小数。

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

3、移动(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浏览器下也行正常运行。

4、倾斜(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函数会改变元素的形状。

5、变形

<!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。

6、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等描述性关键字。

1. css之变形（transform）
2. css学习之transform
3. css变形 transform
4. css animation transform
5. CSS-Transform-transition-Animation
6. css 3D transform变换
7. css的transform变换
8. CSS变形transform(2d)
9. CSS中transform 属性
10. CSS中的transform与transition
更多相关文章...
• jQuery Mobile CSS 类 - jQuery Mobile 教程
• CSS 指南 - 网站建设指南
• 互联网组织的未来：剖析GitHub员工的任性之源
• Java Agent入门实战（一）-Instrumentation介绍与使用