首页 前端知识 CSS3基础之2D转换

CSS3基础之2D转换

2024-11-02 10:11:09 前端知识 前端哥 125 89 我要收藏

转换(transform) 是可以实现元素的位移,旋转,缩放等效果

  • 移动:translate

  • 旋转:rotate

  • 缩放:scale

在CSS中的二维坐标系

在这里插入图片描述

1.1移动translate

2D移动是2D转换里面的一种功能,可以改变元素在页面中的位置,类似定位

  • 定义2D转换中的移动,沿着X和Y轴移动元素

  • translate 最大的优点:不会影响到其他元素的位置

  • translate 中的百分比单位是相对于自身元素

  • 行内标签没有效果

1.2旋转rotate

2D旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转

  • rotate 里面跟度数,单位是 deg 例如 rotate(30deg)

  • 角度为时,顺时针时,为逆时针

  • 默认旋转的中心点是元素的中心点

1.3旋转中心点transform-origin

2D转换中心点:可以设置元素转换的中心点 transform-origin

  • 注意后面的参数x 和 y 用空格隔开

  • x y 默认转换的中心点是元素的中心点(50% 50%)

  • 可以给x y 设置 像素或者方位名词(top bottom left right center)

2.缩放scale

========================================================================

缩放:scale,只要给元素添加上了这个属性就能控制它放大还是缩小

  • 注意其中的(x,y)用逗号分割

  • transform:scale(1,1):宽和高都放大一倍,相当于没有放大

  • transform:scale(2,2):宽和高都放大了2倍

  • transform:scale(2):只写一个参数,第二个参数则和第一个参数一样,相当于 scale(2,2)

  • transform:scale(0.5,0.5):缩小到原来的0.5倍

  • sacle缩放最大的优势:可以设置转换中心点缩放,默认以中心点缩放的,而且不影响其他盒子

3.2D转换综合写法

=========================================================================

  • 同时使用多个转换,其格式为: transform:translate() rotate() scale()

  • 用文字表示,也就是 transform:移动 旋转 缩放

  • 当我们同时有位移和其他属性时候,记得要将移动放到最前面

转载请注明出处或者链接地址:https://www.qianduange.cn//article/19774.html
标签
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!