#yyds干活盘点# 7 Css3高级特效 2D-CFANZ编程社区

一、2D转换方法

1.移动：translate()

设定元素从放千位置移动至给定位置（x坐标 , y坐标）

方法	说明
translate(x,y)	2D转换，沿X和Y轴移动元素
translateX(n)	2D转换，沿X轴移动元素
translateY(n)	2D转换，沿Y轴移动元素

2.旋转：rotate()

设定元素顺时针旋转给定的角度，负值表示逆时针旋转
transform:rotate(ndeg)

3.缩放：scale()

设定元素的尺寸会增加或减少，根据给定的宽度（X轴）和高度（Y轴）的参数

方法	说明
scale(x,y)	2D缩放转换，改变元素的宽度和高度
scaleX(x)	2D缩放转换，改变元素的宽度
scaleY(n)	2D缩放转换，改变元素的高度

4.倾斜：skew()

设定元素翻转给定的角度，根据给定的水平线（X轴）和垂直线参数（Y轴）

方法	说明
skew(x-angle,y-angle)	2D倾斜转换，沿着X轴和Y轴
skewX(angle)	2D倾斜转换，沿着X轴
skewY(angle)	2D倾斜转换，沿着Y轴

5.矩阵：matrix()了解即可

matrix()把所有2D方法组合在一起，有六个参数，使元素能够旋转、缩放、移动以及倾斜
transdorm:matrix(n,n,n,n,n,n)

通过属性transform来进行操作：

属性：transform
作用：对元素进行移动、旋转、缩放、倾斜
语法：transform：none | transform-functions;

二、代码及页面展示

1.移动：translate()代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>2DTranslate</title>
<style>
    *{
      padding: 0;
      margin: 0;
      }
    #box{
      width: 150px;
      height: 150px;
      background: skyblue;
      transform:translate(150px,150px);
      }
</style>
</head>
<body>
    <div id="box"></div>
</body>
</html>

#yyds干活盘点# 7 Css3高级特效 2D_html

2.旋转：rotate()代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>2DRotate</title>
<style>
    div{  
      width: 150px;
      height: 150px;
      margin: 60px auto;
      line-height: 150px;
      text-align: center;
      }
      #box{
        background: skyblue;
      }
      .box{
        background: lightblue;
        transform:rotate(60deg);
      }
      #box1{
        background: blue;
        transform:rotate(-60deg);
      }
</style>
</head>
<body>
    <div id="box"></div>
    <div class="box">顺时针</div>
    <div id="box1">逆时针</div>
</body>
</html>

#yyds干活盘点# 7 Css3高级特效 2D_缩放_02

3.缩放：scale()代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>2DRotate</title>
<style>
    div{  
      width: 150px;
      height: 150px;
      margin: 60px auto;
      line-height: 150px;
      text-align: center;
      }
      #box{
        background: skyblue;
      }
      .box{
        background: lightblue;
        transform:rotate(60deg);
      }
      #box1{
        background: blue;
        transform:rotate(-60deg);
      }
</style>
</head>
<body>
    <div id="box"></div>
    <div class="box">顺时针</div>
    <div id="box1">逆时针</div>
</body>
</html>

#yyds干活盘点# 7 Css3高级特效 2D_html_03

4.倾斜：skew()代码

<!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>2DSkew</title>
  <style>
      *{  
        width: 150px;
        height: 150px;
        padding: 0;
        margin: 50px auto;
        }
        .box{
          background: #9fc;
        }
        .box1{
          background: #99ffff;
          transform:skewX(30deg);
        }
        .box2{
          background: #99ccff;
          transform:skewY(30deg);
        }
        .box3{
          background: #999fff;
          transform:skew(20deg,30deg);
        }
</style>
</head>
<body>
    <div class="box"></div>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>
</html>

#yyds干活盘点# 7 Css3高级特效 2D_html_04

5.矩阵：matrix()代码

<!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>2DMatrix</title>
  <style>
      *{
        padding: 0;
        margin: 0;
        }
      #box{
        width: 150px;
        height: 150px;
        background: skyblue;
        transform:matrix(1,0,0,1,30,30);
      }
</style>
</head>
<body>
    <div id="box"></div>
</body>
</html>