CSS中transform的使用

更新时间:2023-05-14 12:56:01 阅读: 评论:0

CSS中transform的使⽤转换
1、 转换是css3中的⼀个特征,可以实现元素的缩放,位移,变形。
2、 作⽤:使元素在位置或者形状上发⽣⼀定的改变。
3、属性:
hot dogtransform
4、属性值:
ssat培训scale:缩放(⼀般)
translate 位移(重点)
rotate 旋转(重点)
奥巴马国情咨文
skew 倾斜(了解)
缩放
格式:  transform:scale(x,y)
x:表⽰⽔平⽅向上的缩放倍数
大学英语四级考试成绩查询y:表⽰垂直⽅向上的缩放倍数
如果只写⼀个值表⽰等⽐例缩放。
【注意】
卫冕冠军的意思1.缩放只是⼀种视觉效果,不会对别的盒⼦造成影响。
2.取值⼤于1表⽰放⼤,⼩于1表⽰缩⼩。
位移translate
格式:
transform:translate(⽔平位移量,垂直位移量)
取值:⽔平位移量为正,向右移动,垂直⽅向的正⽅形为下。
五年级上册英语试卷
只写⼀个值,表⽰⽔平位移量。
参数为百分⽐的话,是相对于⾃⾝的宽⾼。
位移只是⼀种视觉效果,不会对别的盒⼦造成影响。
旋转:rotate
格式:transform:rotate(⾓度(deg))
单位:deg,正值:顺时针,负值:逆时针。
转换原点:
transform-origin:⽔平坐标,垂直坐标。
取值:
px
clerks
单词
第一次爱的人英文版
center  left  top  right  bottom
倾斜:skew
格式:
transform:skew(⽔平倾斜⾓度,垂直倾斜⾓度)迪士尼神奇英语
单位:deg  正值:顺指针负值:逆时针
两个⾓度相交,不要⼤于等于90deg.
【注意点】
1.转换操作不会影响到其他元素
2.只能添加给块元素,不能添加给⾏内元素。
3.同时添加多个变形操作,先执⾏前⾯的,再执⾏后⾯的。
4.多个变形操作必须写在⼀个transform属性后⾯,书写多次transform属性时,后⾯的会层叠掉前⾯的。
书写多个2D转换事项
1、transform 可以书写多个转换,中间⽤空格隔开。
2、书写顺序的不同,可能会出现不同的结果。
3、如果旋转和位移⼀起书写,旋转在前,位移在后表⽰先旋转,再按照旋转后的⽅向进⾏位移。
linux培训机构
4、 如果位移在前, 旋转在后,表⽰先位移再按照原点进⾏旋转。

本文发布于:2023-05-14 12:56:01,感谢您对本站的认可!

本文链接:https://www.wtabcd.cn/fanwen/fan/90/108148.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

标签:位移   元素   缩放   转换
相关文章
留言与评论(共有 0 条评论)
   
验证码:
Copyright ©2019-2022 Comsenz Inc.Powered by © 专利检索| 网站地图