CSS动画-2D变换-transform实现旋转、缩放、平移、倾斜

最新推荐文章于 2024-09-03 09:00:00 发布

原创最新推荐文章于 2024-09-03 09:00:00 发布 · 1.9k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#web

html 专栏收录该内容

7 篇文章

订阅专栏

本文详细介绍了CSS3中的transform属性，包括平移、缩放、旋转和倾斜等2D变换操作，以及如何使用transform-origin设置变换中心点。特别展示了如何通过rotate()函数实现元素的顺时针和逆时针旋转。

1.1 transform的基本属性值
在CSS3中提供了transform和transform-origin两个用于实现2D变换的属性，其中transform属性用于实现平移、缩放、旋转和倾斜等2D变换，transform-origin用于设置中心点的变换；
在这里插入图片描述
1.2 应用transform属性实现旋转

应用transform属性的rotate（）函数分别实现顺时针旋转30°和逆时针旋转30°，关键代码如下：

#rotate{
 -moz-transform:rotate(30deg);    /*Firefox下顺时针旋转30度*/
 -webkit-transform:rotate(30deg);   /*Chrome下顺时针旋转30度*/
 -o-transform:rotate(30deg);    /*Opera下顺时针旋转30度*/
 -ms-transform:rotate(30deg);    /*IE下顺时针旋转30度*/

逆时针旋转

#rotate1{
  left:300px;
 -moz-transform:rotate(-30deg);    /*Firefox下逆时针旋转30度*/
 -webkit-transform:rotate(-30deg);   /*Chrome下逆时针旋转30度*/
 -o-transform:rotate(-30deg);    /*Opera下逆时针旋转30度*/
 -ms-transform:rotate(-30deg);    /*IE下逆时针旋转30度*/