transform的使用

更新时间:2023-05-11 06:15:41 阅读: 评论:0

transform的使⽤
⼀、
transform可以使元素进⾏缩放、平移、旋转等2D、3D的变换
参数:
translate(x,y)    定义2D转换,表⽰在x轴和y轴上进⾏平移
translate3d(x,y,z)      定义3D转换
translateX(x)    表⽰在x轴上进⾏平移
translateY(y)    表⽰在y轴上进⾏平移
translateZ(z)    表⽰在z轴上进⾏平移
rotate(deg)      表⽰旋转⼀定⾓度,正时针旋转⾓度为正直,逆时针旋转⾓度为负值
rotate3d(x,y,z,deg)      3D转换
rotateX(angle)    3D转换,表⽰绕x轴旋转多少度
rotateY(angle)      3D转换,表⽰绕y轴旋转多少度
rotateZ(abgle)      3D转换,表⽰绕Z轴旋转多少度
scale(x-angle,y-angle)      2D转换,表⽰缩放,在x轴和y轴上扩⼤多少倍。x值和y值表⽰倍数,若值⼩于1 表⽰缩⼩scaleX(angle)    表⽰在x轴上扩⼤多少倍
scaleY(angle)    表⽰在y轴上扩⼤多少倍
skew(x-angle,y-angle)      表⽰在x轴和y轴上分别倾斜的度数
skewX(x)      2D转换,表⽰在x轴上倾斜的度数
skewY(y)      2D转换,表⽰在y轴上倾斜的度数
⼆、
transform-origin ⽤来设置被改变元素的中⼼位置,经常⽤于旋转中设置旋转中⼼
transform-origin:x y z
参数:
x            定义视图被置于x轴何处,
可能的值:left/center/right/length/%
y            定义视图被置于Y轴的何处
可能的值:top/center/bottom/length/%
z            定义视图被置于z轴何处
可能的值:length

本文发布于:2023-05-11 06:15:41,感谢您对本站的认可!

本文链接:https://www.wtabcd.cn/fanwen/fan/82/581593.html

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

标签:旋转   度为   定义   元素   视图   置于
相关文章
留言与评论(共有 0 条评论)
   
验证码:
推荐文章
排行榜
Copyright ©2019-2022 Comsenz Inc.Powered by © 专利检索| 网站地图