您好,欢迎访问代理记账网站
  • 价格透明
  • 信息保密
  • 进度掌控
  • 售后无忧

CSS3的动画变形transform

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜

动画执行前:

代码图

1.旋转 rotate(n)

旋转函数 rotate()通过指定的角度参数使元素相对原点进行旋转;n 为参数,用于设置旋转的角度,如果为正,元素相对原点中心顺时针旋转;如果为负,则逆时针旋转

图为旋转250度之后的效果:

2.扭曲skew()

元素倾斜显示,将对象以其中心位置围绕着 X 轴和 Y 轴按照一定的角度倾斜。

3 种使用情况:

 skew(x,y)元素同时在水平方向和垂直方向扭曲;

 skewX(x)元素仅在水平方向扭曲;

 skewY(y)元素仅在垂直方向扭曲;

(3 )缩放 scale()

——让元素根据中心原点对对象进行缩放。

3 种使用情况:

 scale(x,y) 使元素水平方向和垂直方向同时缩放;

 scaleX(x) 元素仅水平方向缩放;

 scaleY(y) 元素仅垂直方向缩放;

注意:scale()的取值默认为 1,当值设置为 0.01 到0.99 之间的任何值,作用使一个元素 缩小;而任何大于等于 1.01 的值,作用让元素 放大。

4 )移 位移 translate

元素向指定的方向移动;

3 种情况:

 translate(x,y)水平方向和垂直方向同时移动;

 translateX(x)仅水平方向移动;

 translateX(x)仅水平方向移动

新手上道,多多指教。大神勿喷,有不同方式的欢迎评论留言指导哦!

 

 


分享:

低价透明

统一报价,无隐形消费

金牌服务

一对一专属顾问7*24小时金牌服务

信息保密

个人信息安全有保障

售后无忧

服务出问题客服经理全程跟进