css之transform-origin

transform-origin 是 CSS 中的一个属性,它允许你改变一个元素变形的原点。默认情况下,变形的原点位于元素的中心点,即50% 50%(或 center center)。但是,通过使用 transform-origin 属性,你可以将变形的原点移动到元素上的任何位置。

语法

css 复制代码
transform-origin: x-axis y-axis z-axis;
  • x-axis 定义水平方向上的原点位置。
  • y-axis 定义垂直方向上的原点位置。
  • z-axis(可选)定义3D变形中Z轴的原点位置。

  • 关键词 :如 top, right, bottom, left, center
  • 百分比 :如 50% 表示元素自身尺寸的50%处。
  • 长度值 :如 50px 表示距离元素左上角50像素的位置。

示例

  1. 将变形原点设置为元素的左上角:
css 复制代码
transform-origin: top left;
  1. 将变形原点设置为元素的右下角,且Z轴位置为100px:
css 复制代码
transform-origin: right bottom 100px;
  1. 将变形原点设置为元素水平中心,垂直方向上距离顶部25%的位置:
css 复制代码
transform-origin: center 25%;

使用场景

transform-origin 在进行CSS变形时非常有用,比如使用 rotate(旋转)、scale(缩放)等变形函数时,改变原点位置可以得到不同的变形效果。通过调整 transform-origin,你可以控制变形发生的具体位置,从而创造出更加丰富和动态的视觉效果。

总之,transform-origin 是一个强大的CSS属性,它允许你精确控制元素的变形原点,进而创造出更多样化的变形效果。

相关推荐
Json20113156 分钟前
Gin、Echo 和 Beego三个 Go 语言 Web 框架的核心区别及各自的优缺点分析,结合其设计目标、功能特性与适用场景
前端·golang·gin·beego
前端Hardy10 分钟前
HTML&CSS:超丝滑的动态导航菜单
javascript·css·html
阿里云云原生10 分钟前
仅3步!即刻拥有 QwQ-32B,性能比肩全球最强开源模型
前端·云原生
前端Hardy17 分钟前
HTML&CSS:你绝对没见过的input输入框,确定不看看吗
javascript·css·html
前端Hardy18 分钟前
HTML&CSS:不一样的开关效果
javascript·css·html
清灵xmf37 分钟前
Vue 3 自定义权限指令 v-action
前端·javascript·vue.js·自定义指令
一棵树长得超出它自己39 分钟前
jmeter if控制器在loop控制器执行结束后执行
前端·jmeter
阳树阳树2 小时前
signal-新的状态管理模式
前端·javascript
fakaifa2 小时前
beikeshop多商户跨境电商独立站最新版v1.6.0版本源码
前端·小程序·uni-app·php·beikeshop多商户·beikeshop跨境电商
木木黄木木2 小时前
HTML5手写签名板项目实战教程
前端·html·html5