CSS3变形

2018-01-27 本文已影响0人挥剑斩浮云

在CSS3中，我们可以使用transform属性来实现文字或图像的的各种变形效果，如位移、缩放、旋转、倾斜等
transform属性

位移translate()

对于位移translate()方法，我们分为3种情况：
（1）translateX(x)：元素仅在水平方向移动（X轴移动）；
（2）translateY(y)：元素仅在垂直方向移动（Y轴移动）；
（3）transklate(x,y)：元素在水平方向和垂直方向同时移动（X轴和Y轴同时移动）；单位为px、em或%等

缩放scale()

缩放，指的是“缩小”和“放大”。在CSS3中，我们可以使用scale()方法来将元素根据中心原点进行缩放。
- 跟translate()方法一样，缩放scale()方法也有3种情况：
  （1）scaleX(x)：元素仅水平方向缩放（X轴缩放）；
  （2）scaleY(y)：元素仅垂直方向缩放（Y轴缩放）；
  （3）scale(x,y)：元素水平方向和垂直方向同时缩放（X轴和Y轴同时缩放）；'
- 说明：x,y表示元素沿着水平方向（X轴Y轴）缩放的倍数，如果大于1就代表放大；如果小于1就代表缩小,当然放大和缩小是两个方向同时延伸

旋转rotate()

在CSS3中，我们可以使用rotate()方法来将元素相对中心原点进行旋转。这里的旋转是二维的，不涉及三维空间的操作

语法：transform：rotate(度数);

说明：度数指的是元素相对中心原点进行旋转的度数，单位为deg。其中，deg是degree（度数）的缩写
如果度数为正，则表示元素相对原点中心顺时针旋转；如果度数为负，则表示元素相对原点中心进行逆时针旋转

倾斜skew()

在CSS3中，我们可以使用skew()方法将元素倾斜显示。skew()方法跟translate()方法、scale()方法一样，也有3种情况：
（1）skewX(x)：使元素在水平方向倾斜（X轴倾斜）；
（2）skewY(y)：使元素在垂直方向倾斜（Y轴倾斜）；
（3）skew(x,y)：使元素在水平方向和垂直方向同时倾斜（X轴和Y轴同时倾斜）；
skewX(deg)方法
- 如果度数为正，表示元素沿水平方向（X轴）顺时针倾斜；如果度数为负，表示元素沿水平方向（X轴）逆时针倾斜。
skewY(deg)方法
- 如果度数为正，表示元素沿垂直方向（Y轴）顺时针倾斜；如果度数为负，表示元素沿垂直方向（Y轴）逆时针倾斜
skew(x,y)方法
- 第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则值为0，也就是Y轴方向上无斜切
举例

<!DOCTYPE html>
<html lang="en">
<head>
    <title>CSS3倾斜skew()方法</title>
    <style type="text/css">
        /*设置原始元素样式*/
        #origin
        {
            margin:100px auto;/*水平居中*/
            width:200px;
            height:100px;
            border:1px dashed silver;
        }
        /*设置当前元素样式*/
        #current
        {
            width:200px;
            height:100px;
            color:white;
            background-color: #3EDFF4;
            text-align:center;
            transform:skewX(30deg);
            -webkit-transform:skewX(30deg);  /*兼容-webkit-引擎浏览器*/
            -moz-transform:skewX(30deg);/*兼容-moz-引擎浏览器*/
        }
    </style>
</head>
<body>
    <div id="origin">
        <div id="current"></div>
    </div>
</body>
</html>

在浏览器效果

对于初学者，可能一时半会看不出skewX()方法的本质原理。其实skewX()方法变形原理是这样的：由于我给元素限定了高度为100px，而skewX()方法是沿着X轴方向倾斜。所以，只要倾斜角度不是180°，元素都会保持100px的高度。同时为了保持倾斜，只能沿着X轴拉长本身。
由此我们可以总结：
（1）skewX()方法会保持高度，沿着X轴倾斜；
（2）skewY()方法会保持宽度，沿着Y轴倾斜；
（3）skew(x,y)方法会先按照skewX()方法倾斜，然后按照skewY()方法倾斜；

transform:skewY(30deg);
-webkit-transform:skewY(30deg);  /*兼容-webkit-引擎浏览器*/
-moz-transform:skewY(30deg);     /*兼容-moz-引擎浏览器*/

当采用上述代码时，在浏览器预览效果如下：

浏览器效果
学过点基本数学的人都知道，位移、旋转和倾斜都不会改变四边形的面积。skew()方法可能比较少用。不过用的好的话，会让你的网页美观动感，但是用得不好的话，则将是一大败笔

中心原点transform-origin

任何一个元素都有一个中心原点，默认情况下，元素的中心原点位于X轴和Y轴的50%处。默认情况下，CSS3变形进行的位移、缩放、旋转、倾斜都是以元素的中心原点进行变形
在CSS3中，我们可以通过transform-origin属性来改变元素变形时的中心原点位置

语法：transform-origin:取值;
说明：transform-origin属性取值有2种：一种是采用长度值，另外一种是使用关键字。长度值一般使用百分比作为单位，很少使用px、em等作为单位

transform-origin属性取值

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>CSS3中心原点transform-origin属性</title>
    <style type="text/css">
        /*设置原始元素样式*/
        #origin
        {
            margin:100px auto;/*水平居中*/
            width:200px;
            height:100px;
            border:1px dashed gray;
        }
        #current
        {
            width:200px;
            height:100px;
            color:white;
            background-color: #3EDFF4;
            text-align:center;
            transform-origin:right center;/*设置中心圆点靠右居中*/
            -webkit-transform-origin:right center;/*兼容-webkit-引擎浏览器*/
            -moz-transform-origin:right center;   /*兼容-moz-引擎浏览器*/
            transform:rotate(30deg);
            -webkit-transform:rotate(30deg);      /*兼容-webkit-引擎浏览器*/
            -moz-transform:rotate(30deg);         /*兼容-moz-引擎浏览器*/
        }
    </style>
</head>
<body>
    <div id="origin">
        <div id="current"></div>
    </div>
</body>
</html>

浏览器效果

CSS3变形

位移translate()

缩放scale()

旋转rotate()

倾斜skew()

中心原点transform-origin

猜你喜欢

热点阅读