CSS3笔记2— transform旋转、缩放、倾斜、移动_css3 transform沿着角线旋转-优快云博客

本文详细介绍了CSS3中的变换属性，包括旋转(rotate)、缩放(scale)、倾斜(skew)和移动(translate)，以及如何通过transition实现平滑的动画效果。通过实例代码展示了各个属性的使用方法和兼容性处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.旋转

这里写图片描述

CSS：

<style>  
   div {
     width: 200px;
     height: 200px;
     background-color: pink;

     -ms-transform: rotate(45deg);/*IE9*/
     -moz-transform: rotate(45deg);/*Firefox*/
     -webkit-transform: rotate(45deg);/*Safari 和 Chrome*/
     -o-transform: rotate(45deg);/*Opera*/
   }
 </style>

html：

<body>  
  <div></div>
</body>

解析：
-ms-transform: rotate(45deg); /IE9/
-moz-transform: rotate(45deg); /Firefox/
-webkit-transform: rotate(45deg); /Safari 和 Chrome/
-o-transform: rotate(45deg); /Opera/
以上四句是兼容。
rotate(45deg)意思是:表示顺时针旋转，deg是CSS3中的角度单位。

2. 缩放

-ms-transform: scale(2,2);/*IE9*/
-moz-transform: scale(2,2);/*Firefox*/
-webkit-transform: scale(2,2);/*Safari 和 Chrome*/
-o-transform: scale(2,2);/*Opera*/

解析：
transform:scale(值)；它的值是指定的缩放的倍率，比如：
0.5就是缩放到50%；
1就是100%；
1.5就是放大150%；
可能值：scale（x,y)是元素X轴Y轴同时缩放；
scaleX（x)是元素X轴缩放；
scaleY（y)是元素Y轴缩放；

3. 倾斜

-ms-transform: skew(45deg,45deg);/*IE9*/
-moz-transform: skew(45deg,45deg);/*Firefox*/
-webkit-transform: skew(45deg,45deg);/*Safari 和 Chrome*/
-o-transform: skew(45deg,45deg);/*Opera*/

transform : skew(值)；它的值就是角度，
可能值：
skew(x,y);是元素在水平和垂直方向同时扭曲，只有一个参数时只在水平方向倾斜。
skewX(x)仅使元素在水平方向扭曲变形（X轴扭曲变形）；
skewY(y)仅使元素在垂直方向扭曲变形（Y轴扭曲变形）；

4.移动

-ms-transform: translate(50px,50px);/*IE9*/
-moz-transform: translate(50px,50px);/*Firefox*/
-webkit-transform: translate(50px,50px);/*Safari 和 Chrome*/
-o-transform: translate(50px,50px);/*Opera*/

解析：
translate(值）;值是移动的距离。
可能值：
translate(x,y);是元素在水平和垂直方向同时移动。
translateX(x)仅使元素在水平方向移动（X轴移动）；
translateY(y)仅使元素在垂直方向移动（Y轴移动）；

5.transition动画

鼠标未放上：

这里写图片描述

鼠标放上，图片颜色慢慢旋转、放大、过渡到粉色效果，离开后还原：

这里写图片描述

html：

<body>
    <div class="box"></div>
</body>

CSS:

<style>
  .box {
    width: 200px;
    height: 200px;
    border: 1px solid #aaa;
    background-color: red;

    transition: all 1s linear;  /*W3C标准*/
    -webkit-transition: all 1s linear;/*谷歌*/
    -moz-transition: all 1s linear;/*火狐*/
    -o-transition: all 1s linear;/*opera*/

  }
  .box:hover {
    background-color: pink;

    transform: rotate(15deg) scale(1.2); /*W3C标准*/
    -webkit-transform: rotate(15deg) scale(1.2); /*谷歌*/
    -moz-transform: rotate(15deg) scale(1.2); /*火狐*/
    -o-transform: rotate(15deg) scale(1.2); /*opera*/
  }
</style>

解析：

all : 所有属性都将获得动画效果；也可以把all换成background一个属性，即：transition: background 1s linear;
1s : 规定完成动画效果的需要花费的时间；
liner : 在延续时间段，变换的速率变化是匀速变化；其次还有ease(逐渐变慢)、ease-in(加速)、ease-out(减速)、ease-in-out(先加速后减速)。