css3值2d旋转

最新推荐文章于 2023-04-21 17:08:02 发布

泉城IT圈子

最新推荐文章于 2023-04-21 17:08:02 发布

阅读量736

点赞数

分类专栏： CSS3

CSS3 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

今天，我们来讲解一下2d选中的相关内容！
讲解2d旋转之前，首先来讲解一下2d旋转的标签。
transform 用来设置2d旋转的载体。用法：transform:skew();等等
下面，我们来讲解一些transform有哪些方法：
1.translate( x , y )：定义 2D 转换，沿着 X 和 Y 轴移动元素。（translateX( n )，translateY( n ）该方法是可以拆分使用的）
2.scale( x , y )：定义 2D 缩放转换，改变元素的宽度和高度。（scaleX( n )，scaleY( n )该方法是可以拆分使用的）
3.rotate( angle ):定义 2D 旋转，在参数中规定角度。
4.skew( x-angle , y-angle ):定义 2D 倾斜转换，沿着 X 和 Y 轴。（skewX( n )，skewY( n )该方法是可以拆分使用的）

下面我们来具体讲解一下,
我们定义了两个div，一个位于左上角，未设置移动，一个设置移动，来看看效果吧。

<!DOCTYPE html>
<html>
<head>
      <meta charset="utf-8">
      <title></title>
</head>
<style type="text/css">
*{
      padding: 0;
      margin: 0;
}
      div{
         float: left;
         border:1px solid red;
         height: 100px;
         width: 100px;
      }
      .div1{
         float: left;
         border:1px solid red;
         height: 100px;
         transform: translate(100px,100px)；//偏移要加上单位
         width: 100px;
      }
</style>
<body>
      <div>11111</div>
      <div class="div1">22222222</div>
</body>
</html>
我们将transform的属性改为rolate来试试效果transform: rotate(20deg);（deg为旋转角度的单位）

我们再来试试skew的效果transform: skew(10deg,30deg);

我们再来试试scale( x , y )的效果transform: scale(0.5,1);

好啦，让我们加在一起来预览一下吧

等我们在讲解了animation之后，我们就可以做动画效果啦，你也来试试吧，
下节，我们来讲解3d旋转！

泉城IT圈子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3值2d旋转

今天，我们来讲解一下2d选中的相关内容！讲解2d旋转之前，首先来讲解一下2d旋转的标签。transform 用来设置2d旋转的载体。用法：transform:skew();等等下面，我们来讲解一些transform有哪些方法：1.translate(x,y)：定义 2D 转换，沿着 X 和 Y 轴移动元素。（translateX(n)，translateY(n）该方法是可以拆
复制链接

扫一扫