认识CSS3特性之转换

佚名 5年前 (2019-05-09) 随笔 872人围观抢沙发百度已收录

前端之HTML5，CSS3（四）

　　转换(transform)

　　通过 CSS3 转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸，即转换是使元素改变形状、尺寸和位置的一种效果。

　　2D 转换

　　2D转换是指二维平面转换，表示操作改变元素的x轴和y轴坐标。转换方法有：移动(translate)、旋转(rotate)、缩放(scale)、倾斜(skew)

SRE实战互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

　　translate()

　　translate(x,y)表示元素向右移动x距离，向下移动y距离。其中x，y可以为负值，表示向左移动x的绝对值的距离，向上移动y的绝对值的距离。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>2D 转换-测试</title>
    <style type="text/css">
        div {
            width: 100px;
            height: 100px;
            background-color: skyblue;
            transform: translate(20px,50px);
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

　　效果展示

　　rotate()　

　　rotate(n)表示元素顺时针旋转n度，其中n可以为负值，表示元素逆时针旋转n度。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>2D 转换-测试</title>
    <style type="text/css">
        div {
            width: 100px;
            height: 100px;
            background-color: skyblue;
            margin: 100px auto;
            transform: rotate(30deg); /*deg是单位度的表示，类似于像素的表示px*/
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

　　效果展示

　　注意：可以通过transform-origin:mpx npx;设置旋转元素的中心点，即按照坐标为(m,n)的点进行旋转，默认旋转中心为规则图形的几何中心，不规则图形的重心。

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>2D 转换-测试</title>
 6     <style type="text/css">
 7         div {
 8             width: 100px;
 9             height: 100px;
10             background-color: skyblue;
11             margin: 100px auto;
12             transform: rotate(20deg);
13             transform-origin: right bottom;  /*设置旋转中心为右下角，默认旋转中心为元素几何中心*/
14         }
15     </style>
16 </head>
17 <body>
18     <div></div>
19 </body>
20 </html>

View Code

　　　scale()

　　scale(m,n)表示元素的宽度放大m倍，高度放大n倍，其中m，n可以为负值，表示宽度缩小m倍，高度缩小n倍。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>2D 转换-测试</title>
    <style type="text/css">
        div {
            width: 100px;
            height: 100px;
            background-color: skyblue;
            margin: 100px auto;
            transform: scale(-.5,2); 
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

　　效果展示

　　skew()

　　skew(m,n)表示元素向左倾斜m度，向下倾斜n度，其中m，n可以为负值，表示向右倾斜m度，向上倾斜n度。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>2D 转换-测试</title>
    <style type="text/css">
        div {
            width: 100px;
            height: 100px;
            background-color: skyblue;
            margin: 100px auto;
            transform: skew(0deg,20deg); 
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>