devbox
AI算法诗人
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

transform-origin用法归纳，总结（7）_transform-origin用clca计算

作者：AI算法诗人 | 2024-02-05 09:59:43

赞

踩

transform-origin用clca计算

 

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

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

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

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

句法Section

  1. <span style="color:#333333"><code class="language-css"><span style="color:#708090">/* One-value syntax */</span>
  2. <span style="color:#990055">transform-origin</span><span style="color:#999999">:</span> <span style="color:#990055">2</span>px<span style="color:#999999">;</span>
  3. <span style="color:#990055">transform-origin</span><span style="color:#999999">:</span> bottom<span style="color:#999999">;</span>
  4.  
  5. <span style="color:#708090">/* x-offset | y-offset */</span>
  6. <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>
  7.  
  8. <span style="color:#708090">/* x-offset-keyword | y-offset */</span>
  9. <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>
  10.  
  11. <span style="color:#708090">/* x-offset-keyword | y-offset-keyword */</span>
  12. <span style="color:#990055">transform-origin</span><span style="color:#999999">:</span> right top<span style="color:#999999">;</span>
  13.  
  14. <span style="color:#708090">/* y-offset-keyword | x-offset-keyword */</span>
  15. <span style="color:#990055">transform-origin</span><span style="color:#999999">:</span> top right<span style="color:#999999">;</span>
  16.  
  17. <span style="color:#708090">/* x-offset | y-offset | z-offset */</span>
  18. <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>
  19.  
  20. <span style="color:#708090">/* x-offset-keyword | y-offset | z-offset */</span>
  21. <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>
  22.  
  23. <span style="color:#708090">/* x-offset-keyword | y-offset-keyword | z-offset */</span>
  24. <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>
  25.  
  26. <span style="color:#708090">/* y-offset-keyword | x-offset-keyword | z-offset */</span>
  27. <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>
  28.  
  29. <span style="color:#708090">/* Global values */</span>
  30. <span style="color:#990055">transform-origin</span><span style="color:#999999">:</span> inherit<span style="color:#999999">;</span>
  31. <span style="color:#990055">transform-origin</span><span style="color:#999999">:</span> initial<span style="color:#999999">;</span>
  32. <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

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

传说

 

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/AI算法诗人/article/detail/60335
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号