transform-origin用法归纳，总结（7）

最新推荐文章于 2023-08-05 22:23:09 发布
最新推荐文章于 2023-08-05 22:23:09 发布
阅读量1k 收藏
点赞数
分类专栏： css3学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xu2034029667/article/details/98081521
版权

 

  • 单值语法：
    • 该值必须是一个<length>，一个<percentage>，或关键字之一left，center，right，top，和bottom。
  • 双值语法：
  • 三值语法：
    • 前两个值与双值语法相同。
    • 第三个值必须是a <length>。它始终代表Z偏移。

该CSS属性设置为元素的转换原点。transform-origin

转换原点是应用转换的点。例如，rotate()函数的变换原点是旋转中心。（通过首先使用属性的否定值转换元素，然后应用元素的转换，然后通过属性值进行转换来应用此属性。）

默认情况下，转换的原点是center。

句法Section

<span style="color:#333333"><code class="language-css"><span style="color:#708090">/* One-value syntax */</span>
<span style="color:#990055">transform-origin</span><span style="color:#999999">:</span> <span style="color:#990055">2</span>px<span style="color:#999999">;</span>
<span style="color:#990055">transform-origin</span><span style="color:#999999">:</span> bottom<span style="color:#999999">;</span>

<span style="color:#708090">/* x-offset | y-offset */</span>
<span style="color:#990055">transform-origin</span><span style="color:#999999">:</span> <span style="color:#990055">3</span>cm <span style="color:#990055">2</span>px<span style="color:#999999">;</span>

<span style="color:#708090">/* x-offset-keyword | y-offset */</span>
<span style="color:#990055">transform-origin</span><span style="color:#999999">:</span> left <span style="color:#990055">2</span>px<span style="color:#999999">;</span>

<span style="color:#708090">/* x-offset-keyword | y-offset-keyword */</span>
<span style="color:#990055">transform-origin</span><span style="color:#999999">:</span> right top<span style="color:#999999">;</span>

<span style="color:#708090">/* y-offset-keyword | x-offset-keyword */</span>
<span style="color:#990055">transform-origin</span><span style="color:#999999">:</span> top right<span style="color:#999999">;</span>

<span style="color:#708090">/* x-offset | y-offset | z-offset */</span>
<span style="color:#990055">transform-origin</span><span style="color:#999999">:</span> <span style="color:#990055">2</span>px <span style="color:#990055">30</span>% <span style="color:#990055">10</span>px<span style="color:#999999">;</span>

<span style="color:#708090">/* x-offset-keyword | y-offset | z-offset */</span>
<span style="color:#990055">transform-origin</span><span style="color:#999999">:</span> left <span style="color:#990055">5</span>px <span style="color:#990055">-3</span>px<span style="color:#999999">;</span>

<span style="color:#708090">/* x-offset-keyword | y-offset-keyword | z-offset */</span>
<span style="color:#990055">transform-origin</span><span style="color:#999999">:</span> right bottom <span style="color:#990055">2</span>cm<span style="color:#999999">;</span>

<span style="color:#708090">/* y-offset-keyword | x-offset-keyword | z-offset */</span>
<span style="color:#990055">transform-origin</span><span style="color:#999999">:</span> bottom right <span style="color:#990055">2</span>cm<span style="color:#999999">;</span>

<span style="color:#708090">/* Global values */</span>
<span style="color:#990055">transform-origin</span><span style="color:#999999">:</span> inherit<span style="color:#999999">;</span>
<span style="color:#990055">transform-origin</span><span style="color:#999999">:</span> initial<span style="color:#999999">;</span>
<span style="color:#990055">transform-origin</span><span style="color:#999999">:</span> unset<span style="color:#999999">;</span></code></span>

该transform-origin属性可以使用一个，两个或三个值，其中每个值表示偏移来指定。未明确定义的偏移将重置为其对应的初始值。

如果定义了两个或多个值，并且没有值是关键字，或者唯一使用的关键字是center，则第一个值表示水平偏移，第二个值表示垂直偏移。

  • 单值语法：
    • 该值必须是一个<length>，一个<percentage>，或关键字之一left，center，right，top，和bottom。
  • 双值语法：
  • 三值语法：
    • 前两个值与双值语法相同。
    • 第三个值必须是a <length>。它始终代表Z偏移。

值Section

x偏移量

是a <length>还是<percentage>描述了从框的左边缘开始设置变换原点的距离。

偏移关键词

是一个left，right，top，bottom，或center关键字描述所述对应的偏移量。

y偏移量

是a <length>还是<percentage>描述距离框的上边缘有多远，设置了变换的原点。

x偏移量关键字

是的一个left，right或center关键字描述从禁区左边缘有多远变换的原点设置。

y偏移量关键字

是的一个top，bottom或center关键字描述从盒子的顶部边缘多远的变换原点设置。

Z-偏移

是<length>（并且决不<percentage>会使声明无效）描述用户眼睛距离z = 0原点的距离。

关键字是便捷缩写并匹配以下<percentage>值：

关键词值
left0%
center50%
right100%
top0%
bottom100%

形式语法Section

<span style="color:#333333"><a data-cke-saved-href="https://developer.mozilla.org/en-US/docs/CSS/Value_definition_syntax#Brackets" href="https://developer.mozilla.org/en-US/docs/CSS/Value_definition_syntax#Brackets">[ </a> <a data-cke-saved-href="https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin#length-percentage" href="https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin#length-percentage"><length-percentage> </a> <a data-cke-saved-href="https://developer.mozilla.org/en-US/docs/CSS/Value_definition_syntax#Single_bar" href="https://developer.mozilla.org/en-US/docs/CSS/Value_definition_syntax#Single_bar">| </a>离开<a data-cke-saved-href="https://developer.mozilla.org/en-US/docs/CSS/Value_definition_syntax#Single_bar" href="https://developer.mozilla.org/en-US/docs/CSS/Value_definition_syntax#Single_bar">| </a>中心<a data-cke-saved-href="https://developer.mozilla.org/en-US/docs/CSS/Value_definition_syntax#Single_bar" href="https://developer.mozilla.org/en-US/docs/CSS/Value_definition_syntax#Single_bar">| </a>对<a data-cke-saved-href="https://developer.mozilla.org/en-US/docs/CSS/Value_definition_syntax#Single_bar" href="https://developer.mozilla.org/en-US/docs/CSS/Value_definition_syntax#Single_bar">| </a>顶部<a data-cke-saved-href="https://developer.mozilla.org/en-US/docs/CSS/Value_definition_syntax#Single_bar" href="https://developer.mozilla.org/en-US/docs/CSS/Value_definition_syntax#Single_bar">| </a>底部<a data-cke-saved-href="https://developer.mozilla.org/en-US/docs/CSS/Value_definition_syntax#Brackets" href="https://developer.mozilla.org/en-US/docs/CSS/Value_definition_syntax#Brackets">] </a> <a data-cke-saved-href="https://developer.mozilla.org/en-US/docs/CSS/Value_definition_syntax#Single_bar" href="https://developer.mozilla.org/en-US/docs/CSS/Value_definition_syntax#Single_bar">| </a> <a data-cke-saved-href="https://developer.mozilla.org/en-US/docs/CSS/Value_definition_syntax#Brackets" href="https://developer.mozilla.org/en-US/docs/CSS/Value_definition_syntax#Brackets">[ </a> <a data-cke-saved-href="https://developer.mozilla.org/en-US/docs/CSS/Value_definition_syntax#Brackets" href="https://developer.mozilla.org/en-US/docs/CSS/Value_definition_syntax#Brackets">[ </a> <a data-cke-saved-href="https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin#length-percentage" href="https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin#length-percentage"><length-percentage> </a> <a data-cke-saved-href="https://developer.mozilla.org/en-US/docs/CSS/Value_definition_syntax#Single_bar" href="https://developer.mozilla.org/en-US/docs/CSS/Value_definition_syntax#Single_bar">| </a>离开<a data-cke-saved-href="https://developer.mozilla.org/en-US/docs/CSS/Value_definition_syntax#Single_bar" href="https://developer.mozilla.org/en-US/docs/CSS/Value_definition_syntax#Single_bar">| </a>中心<a data-cke-saved-href="https://developer.mozilla.org/en-US/docs/CSS/Value_definition_syntax#Single_bar" href="https://developer.mozilla.org/en-US/docs/CSS/Value_definition_syntax#Single_bar">| </a>右<a data-cke-saved-href="https://developer.mozilla.org/en-US/docs/CSS/Value_definition_syntax#Brackets" href="https://developer.mozilla.org/en-US/docs/CSS/Value_definition_syntax#Brackets">] </a> <a data-cke-saved-href="https://developer.mozilla.org/en-US/docs/CSS/Value_definition_syntax#Double_ampersand" href="https://developer.mozilla.org/en-US/docs/CSS/Value_definition_syntax#Double_ampersand">&& </a> <a data-cke-saved-href="https://developer.mozilla.org/en-US/docs/CSS/Value_definition_syntax#Brackets" href="https://developer.mozilla.org/en-US/docs/CSS/Value_definition_syntax#Brackets">[ </a> <a data-cke-saved-href="https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin#length-percentage" href="https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin#length-percentage"><长度 - 百分比> </a> <a data-cke-saved-href="https://developer.mozilla.org/en-US/docs/CSS/Value_definition_syntax#Single_bar" href="https://developer.mozilla.org/en-US/docs/CSS/Value_definition_syntax#Single_bar">| </a>顶部<a data-cke-saved-href="https://developer.mozilla.org/en-US/docs/CSS/Value_definition_syntax#Single_bar" href="https://developer.mozilla.org/en-US/docs/CSS/Value_definition_syntax#Single_bar">| </a>中心<a data-cke-saved-href="https://developer.mozilla.org/en-US/docs/CSS/Value_definition_syntax#Single_bar" href="https://developer.mozilla.org/en-US/docs/CSS/Value_definition_syntax#Single_bar">| </a>底<a data-cke-saved-href="https://developer.mozilla.org/en-US/docs/CSS/Value_definition_syntax#Brackets" href="https://developer.mozilla.org/en-US/docs/CSS/Value_definition_syntax#Brackets">] </a> <a data-cke-saved-href="https://developer.mozilla.org/en-US/docs/CSS/Value_definition_syntax#Brackets" href="https://developer.mozilla.org/en-US/docs/CSS/Value_definition_syntax#Brackets">] </a> <a data-cke-saved-href="https://developer.mozilla.org/en-US/docs/Web/CSS/length" href="https://developer.mozilla.org/en-US/docs/Web/CSS/length"><长> </a><a data-cke-saved-href="https://developer.mozilla.org/en-US/docs/CSS/Value_definition_syntax#Question_mark_()" href="https://developer.mozilla.org/en-US/docs/CSS/Value_definition_syntax#Question_mark_()">？</a></span>

哪里
<length-percentage> = <length> | <percentage>

例子Section

码样品

transform: none;

 

transform: rotate(30deg);

 

transform: rotate(30deg);
transform-origin: 0 0;

 

transform: rotate(30deg);
transform-origin: 100% 100%;

 

transform: rotate(30deg);
transform-origin: -1em -3em;

 

transform: scale(1.7);

 

transform: scale(1.7);
transform-origin: 0 0;

 

transform: scale(1.7);
transform-origin: 100% -30%;

 

transform: skewX(50deg);
transform-origin: 100% -30%;

 

transform: skewY(50deg);
transform-origin: 100% -30%;

 

产品规格Section

规格状态评论
CSS Transforms Level 1
该规范中'transform-origin'的定义。		工作草案 
初始值50% 50% 0
适用于可变形元素
遗传没有
百分比参考边界框的大小
媒体视觉
计算值对于<length>绝对值，否则百分比
动画类型简单的长度，百分比或计算列表
规范秩序一个或两个值，长度为绝对值，关键字为百分比

浏览器兼容性

 桌面移动
 铬边缘火狐IE浏览器歌剧苹果浏览器Android webview适用于Android的Chrome适用于Android的Firefox适用于Android的OperaiOS上的Safari三星互联网
transform-origin全力支持36打开全力支持12打开全力支持16打开全力支持10打开全力支持23打开全力支持9打开全力支持37打开全力支持36打开全力支持16打开全力支持24打开全力支持9打开完全支持3.0打开
三值语法全力支持是的全力支持12全力支持10全力支持9没有支持号全力支持是的全力支持是的全力支持是的全力支持10没有支持号？？
支持SVG

试验

全力支持是的全力支持17全力支持43

笔记

打开		没有支持号全力支持是的？全力支持是的全力支持是的全力支持43

笔记

打开		？？？

内容出处：https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin

记录如此，以备不时之需！ 

传说

 

漫游者码农
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS新手教程：transform-origin属性详解 实操使用效果示例
ItStar
03-31 1306
相信熟悉CSS3动画的小伙伴们对这个属性应该不陌生了，这个属性能够为我们的动画添加更多有趣的效果，但同时其不够直观的特点也给大家带来一定学习上的困难。今天我们就来剖析一下这个属性。默认...
transform-origin属性详解
热门推荐
鹿蹊zz的博客
05-27 3万+
transform-origin用于设置动画的基点(中心点) ， 适用于所有块级元素及某些内联元素。 必须配合transform使用 默认情况下，元素的动作参考点为元素盒子的中心 可以设置九个位置的值：水平方向： left center right 0 50% 100% ......
CSS3过渡、过渡练习——进度条案例、2D转换(translate、rotate、scale、转换中心点transform-origin)、动画、3D、案例（两面翻转的盒子、3D导航栏、旋转木马案例）
weixin_70320000的博客
02-16 1740
CSS3过渡、过渡练习——进度条案例、2D转换(translate、rotate、scale、转换中心点transform-origin)、动画、3D、案例（两面翻转的盒子、3D导航栏、旋转木马案例）
【CSS3】CSS3 2D 转换 - rotate 旋转 ③ ( 使用 transfrom-origin 设置旋转中心点 | 使用 方位词 / 百分比值 / 像素值 设置旋转中心点 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
08-05 5406
一、使用 transfrom-origin 设置旋转中心点 二、代码示例 - 使用 transfrom-origin 设置旋转中心点 1、代码示例 - 使用方位词设置旋转中心点 2、代码示例 - 使用百分比设置旋转中心点 3、代码示例 - 使用像素值设置旋转中心点
CSS transform-origin
CyberPlayer的博客
03-01 1万+
一、transform-origin属性介绍 transform-origin属性表示在对元素进行变换的时候，设置围绕哪个点进行变化的。默认情况，变换的原点在元素的中心点，即是元素X轴和Y轴的50%处，如下图所示： 我们没有使用transform-origin改变元素原点位置的情况下，CSS变换进行的旋转、移位、缩放等操作都是以元素自己中心（变换原点）位置进行变换的。但很多时候需要在不同的位置对元素进行变换操作，我们就可以使用transform-origin来对元素进行原点位置改变，使元素原.
CSS transform-origin属性的理解
09-22
**CSS transform-origin属性详解** **一、属性定义与作用** `transform-origin` 是CSS3中的一个变换属性，它用于指定元素在进行旋转、缩放、移动或倾斜等变换操作时的基点，即变换的原点。这个原点默认位于元素的...
0062 设置元素旋转中心点：transform-origin
01-20
transform-origin 基础语法 transform-origin: x y; 重要知识点 注意后面的参数 x 和 y 用空格隔开 x、 y 默认旋转的中心点是元素的中心 (50P%)，等价于 center center 还可以给 x y 设置像素，或者方位名词(top、...
babel-plugin-transform-require-ignore
01-31
我们必须找到另一种方法来忽略webpack使用的扩展，并使其在节点环境中工作。 在.babelrc为节点配置它，在节点中运行测试或构建服务器渲染应用程序时，我们可以忽略该要求。 然后，我们使用BABEL_ENV=node运行...
提供css中的transform-origin、iOS中的锚点、Android中的枢轴点等功能。 它使 React-Native 中的 3D 变换动画更好。
06-08
react-native-anchor-point 提供了一个简单，棘手但强大的功能， with AnchorPoint ，就像iOS中的Anchor Point，Android中的Pivot Point，css中的transform-origin，以在React-Native中实现更好的3D变换动画。...
redux-persist-transform-filter：用于redux-persist的过滤器转换器
02-05
redux-persist-transform-filter 用于redux-persist的滤波器变换器 安装 npm install redux-persist-transform-filter 用法 import { createFilter , createBlacklistFilter } from 'redux-persist-transform-...
CSS3新属性篇(二)：transform-origin属性
madman0621的博客
09-06 7972
一、transform-origin属性介绍 transform-origin属性表示在对元素进行变换的时候，设置围绕哪个点进行变化的。默认情况，变换的原点在元素的中心点，即是元素X轴和Y轴的50%处，如下图所示： 我们没有使用transform-origin改变元素原点位置的情况下，CSS变换进行的旋转、移位、缩放等操作都是以元素自己中心（变换原点）位置进行变换的。但很多时候需要在不同的...
transform-origin属性 设置元素的基点位置
weixin_73755593的博客
02-26 436
笔记
javascript旋转_使用JavaScript将元素旋转到鼠标和触摸位置
cungui5726的博客
08-24 1335
javascript旋转Using CSS transforms, transitions and animation, we can rotate any element on the page, but CSS won’t allow us to do that dynamically, in response to user input. To make that happen, we ne...
transform(变形)和transform-origin(变形原点)
小小前端的博客
08-15 4531
转载请说明出处，原文地址http://blog.sina.com.cn/s/blog_780a942701014xl8.html transform(变形)和transform-origin(变形原点)的说明： 目前这两个属性得到了除去ie以外各个主流浏览器webkit，firefox，opera的支持，属性名分别为 -webkit-transform，-moz-transform，-o-tr...
css3中的transform中的3d变换：translatez()与transform-origin-z()的区别
kbx8916的博客
03-27 8564
3d变换中的移动，z中的正方向面向用户,值越大，越靠近用户。 translatez（100px）离用户更近了。 transform-origin-z中z轴的正方向向内，即值越大，离用户越远。与translatez刚好相反。 默认：transform-origin:50% 50% 0px;
css transform-origin 的作用说明，小程序 createAnimation
学习笔记
01-18 2953
css transform-origin 的作用说明，小程序 transformOrigin: “50% 100% 0” 正如名字所写的， transform-origin 就是指定变换的原点。就是一个点。 其中的三个参数值分别代表的是这个点的 xyz轴上的相对位置。 x 轴方向上的位置 50%，y 轴方向上的位置 50%， z 轴方向上的位置 0%，其百分比是相对于这个元素来说的。 默认值 c...
CSS3 transform-origin 设置旋转元素的基点位置
weixin_30631587的博客
07-09 1583
<!DOCTYPE html> <html > <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/> <meta name="viewport" conte...
CSS3变形之transform-origin属性
xu_ya_fei的专栏
06-19 6138
CSS3变形之transform-origin属性
css元素旋转原点,使用transform-origin属性改变元素变换原点
weixin_29325007的博客
08-03 5236
使用CSS中的旋转函数可以让元素旋转指定的角度，比如transform:rotate(45deg)这条声明是表示将元素顺时针旋转45度，这里的旋转是按照一个默认的原点进行的，在CSS里可以使用transform-origin属性自定义元素变换的原点坐标，下面简单的做一个示例试试看：#x{margin:100px;width:150px;height:80px;background-color:#...
transform-origin
最新发布
01-24
transform-origin属性用于指定元素变换的原点。它定义了元素变换的中心点，可以控制元素的旋转、缩放和倾斜等变换效果。transform-origin属性接受三个值，分别表示X轴、Y轴和Z轴的偏移量。 以下是一个示例： ```css...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值