web随堂笔记

71 阅读1分钟

今天学习了CSS3变形:平移、旋转、缩放、倾斜效果 它们可以分别操控元素发生平移、旋转、缩放、倾斜等变化

注意: 设置变形函数,可以是一个,也可以是多个,中间以空格分开 transform:[transform-function] ;

变形函数
1.translate():平移函数,基于X、Y坐标重新定位元素的位置

image.png

image.png

2.scale():缩放函数,可以使任意元素对象尺寸发生变化

image.png 重点:缩小是从中心开始缩小的

image.png 3.rotate():旋转函数,取值是一个度数值 可取负数
度数使用deg单位

image.png

围绕着中心旋转

image.png

4.skew():倾斜函数,取值是一个度数值 度数使用deg单位
skew只设置一个值表示x轴向左倾斜30度

image.png

旋转和倾斜的区别 image.png