CSS3 2D转换

最新推荐文章于 2024-05-12 11:58:43 发布

VVVGG

最新推荐文章于 2024-05-12 11:58:43 发布

阅读量349

点赞数

分类专栏： CSS3

本文链接：https://blog.csdn.net/VVVZCS/article/details/82785031

版权

CSS3 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

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>

参考文章：https://www.runoob.com/css3/css3-2dtransforms.html

VVVGG

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3 2D转换

1，translate语法：translate: transform(x, y);从当前位置，向下移动x距离，向右移动y距离，x和y可以是百分比，允许负值&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta http-equiv="X-UA-Compatibl...
复制链接

扫一扫

专栏目录