CSS3 2D转换

最新推荐文章于 2024-09-02 08:53:49 发布

原创最新推荐文章于 2024-09-02 08:53:49 发布 · 408 阅读

0 ·

CC 4.0 BY-SA版权

CSS3 专栏收录该内容

8 篇文章

订阅专栏

1，translate

语法：translate: transform(x, y);

从当前位置，向下移动x距离，向右移动y距离，x和y可以是百分比，允许负值

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>CSS3</title>
  <link rel="stylesheet" href="">
  <style type="text/css">
    *{
      padding: 0;
      margin: 0;
    }
    div{
      width: 100px;
      height: 100px;
      background-color: rgba(255, 0, 0, .5);
      transform: translate(50px, 50px);
    }
  </style>
</head>
<body>
  <div>
  </div>
</body>
</html>

2，rotate()

给定一个度数，顺时针旋转，负值是逆时针旋转

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>CSS3</title>
  <link rel="stylesheet" href="">
  <style type="text/css">
    *{
      padding: 0;
      margin: 0;
    }
    div{
      margin: 100px;
      width: 100px;
      height: 100px;
      background-color: rgba(255, 0, 0, .5);
      transform: rotate(30deg);
    }
  </style>
</head>
<body>
  <div>
  </div>
</body>
</html>

3，scale()

指定改元素变大或缩小的倍数

4，skew()

包含两个参数值，分别表示x轴和y轴倾斜的角度，允许负值，

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>CSS3</title>
  <link rel="stylesheet" href="">
  <style type="text/css">
    *{
      padding: 0;
      margin: 0;
    }
    div{
      margin: 50px;
      width: 100px;
      height: 100px;
      background-color: rgba(255, 0, 0, .5);
      transform: skew(0deg, 0deg);
    }
  </style>
</head>
<body>
  <div>
    This is a div label
  </div>
</body>
</html>