css3属性transform-origin属性讲解_cdgogo的博客-程序员宝宝_transform-origin属性

技术标签: CSS  css3  

transform是CSS3里的变换属性,常用的有translate(平移)、rotate(旋转)、skew(倾斜)、scale(缩放)方法。而transform-origin并不是transform的属性值,其具有独立的语法,但值得注意的是,transform-origin必须配合transform来使用,这个从名字也可以看得出来,就是给transform设置的各种动作设置一个参考点。默认情况下,元素的动作参考点为元素盒子的中心。transform可以设置九个位置的值,水平方向有left | center | right 三个值,垂直方向也有三个,分别是 top | center |bottom ,故一共有九个。

语法:

transform-origin:[ | | left | center① | right ] [ | | top | center② | bottom ]?

  • 默认值:50% 50%,效果等同于center center
  • 适用于:所有块级元素及某些内联元素

取值:

  • percentage:用百分比指定坐标值。可以为负值。
  • length:用长度值指定坐标值。可以为负值。
  • left:指定原点的横坐标为left
  • center①:指定原点的横坐标为center
  • right:指定原点的横坐标为right
  • top:指定原点的纵坐标为top
  • center②:指定原点的纵坐标为center
  • bottom:指定原点的纵坐标为bottom

说明:

  • 设置或检索对象以某个原点进行转换。
  • 该属性提供2个参数值。
  • 如果提供两个,第一个用于横坐标,第二个用于纵坐标。
  • 如果只提供一个,该值将用于横坐标;纵坐标将默认为50%。
  • 对应的脚本特性为transformOrigin。

兼容性:

在这里插入图片描述

transform属性

默认情况,变形的原点在元素的中心点,或者是元素X轴和Y轴的50%处,如下图所示:
在这里插入图片描述
我们没有使用transform-origin改变元素原点位置的情况下,CSS变形进行的旋转、移位、缩放等操作都是以元素自己中心(变形原点)位置进行变形的。但很多时候需要在不同的位置对元素进行变形操作,我们就可以使用transform-origin来对元素进行原点位置改变,使元素原点不在元素的中心位置,以达到需要的原点位置。

看上去transform-origin取值与background-position取值类似。为了方便记忆,可以把关键词和百分比值对比起来记:

  • top = top center = center top = 50% 0
  • right = right center = center right = 100%或(100% 50%)
  • bottom = bottom center = center bottom = 50% 100%
  • left = left center = center left = 0或(0 50%)
  • center = center center = 50%或(50% 50%)
  • top left = left top = 0 0
  • right top = top right = 100% 0
  • bottom right = right bottom = 100% 100%
  • bottom left = left bottom = 0 100%

为了让大家能一眼看明白,下面截图以transform中的旋转rotate()为例,并transform-origin取值不一样时的效果:
transform-origin取值为center(或center center或50% 或50% 50%):

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gRIISlqc-1633875768463)(/img/bVbjVGt)]

transform-origin取值为top(或top center或center top或50% 0):
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VXZJGqCq-1633875768488)(/img/bVbjVG0)]

transform-origin取值为right(或right center 或center right 或 100% 或 100% 50%):
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vNFLde9B-1633875768492)(/img/bVbjVG1)]

transform-origin取值为bottom(或bottom center 或center bottom 或 50% 100%):
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uLU5WK9Z-1633875768495)(/img/bVbjVHj)]

transform-origin取值为left(或left center或center left或0或0 50%):
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-J4M5KfQ2-1633875768498)(/img/bVbjVHF)]

transform-origin取值为top left(或left top或0 0):
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NH5aiRck-1633875768500)(/img/bVbjVHI)]

transform-origin取值为right top(或top right或100% 0):
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WGT8AVJs-1633875768501)(/img/bVbjVHO)]

transform-origin取值为bottom right(或right bottom或100% 100%):
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gAvH0BZX-1633875768503)(/img/bVbjVHY)]

transform-origin取值为left bottom(或bottom left 或 0 100%):
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-i5FsAQvW-1633875768504)(/img/bVbjVIb)]

参考文章:http://www.w3cplus.com/css3/transform-origin.html


实例:摆动的小球(钟摆效果)

在这里插入图片描述
从上图中可以看出,小球摆动效果运用了动画原理,以及transform-origin原理(很重要)。首先,先确定好球的变形中心点,然后在添加动画效果。
![原理图][3]

原理图:
在这里插入图片描述

 <div class="sphere"></div>
.sphere {
    
    width: 60px;
    height: 60px;
    background: #9485FD;
    border-radius: 100%;
    margin: 280px auto;
    background: radial-gradient(circle at top center, #c6bff6, #6959d8, #372a91);
    transform-origin: center -200px;
    animation: clock 4s infinite linear;
    position: relative;
}

.sphere::before {
    
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    width: 1px;
    height: 200px;
    border-left: 1px #9485FD dashed;
}

@keyframes clock {
    
    0% {
    
        transform: rotate(0deg)
    }
    25% {
    
        transform: rotate(30deg)
    }
    50% {
    
        transform: rotate(0deg)
    }
    75% {
    
        transform: rotate(-30deg)
    }
    100% {
    
        transform: rotate(0deg)
    }
}

实例:2D圆周环绕动画

在这里插入图片描述

<div class="outer">
  <div class="horizontal-line"></div>
  <div class="vertical-line"></div>
  <div class="inner"></div>
</div>
.outer {
    
  /**定义子元素水平居中**/
  display:flex;
  justify-content:center;
  width: 100px;
  height: 100px;
  background-color: #6a5acd8c;
  position:relative;
}
/**竖向辅助线**/
.vertical-line{
    
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  height:100%;
  width:1px;
  background:#000;
}
/**横向辅助线**/
.horizontal-line{
    
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:100%;
  height:1px;
  background:#000;
}
.inner {
    
  width:20px;
  height:20px;
  border-radius:50%;
  background-color: #6a5acdeb;
  transform-origin:50% 50px;/**50px为环绕半径*/
  animation:an-circle 3s ease-in-out infinite;
}
@keyframes an-circle  {
    
   to {
    
      transform: rotate(1turn);
   }
}

实例:2D加载动画

在这里插入图片描述

<div class="outer">
  <div class="inner"></div>
  <div class="inner"></div>
  <div class="inner"></div>
  <div class="inner"></div>
</div>
.outer {
    
  /**定义子元素水平居中**/
  display:flex;
  justify-content:center;
  width: 100px;
  height: 100px;
  background-color: #6a5acd8c;
  position:relative;
}
.inner {
    
  position:absolute;
  width:20px;
  height:20px;
  border-radius:50%;
  background-color: #6a5acdeb;
  transform-origin: 50% 50px;
  animation:an-circle 3s ease-in-out infinite;
}
.inner:nth-child(2){
    
  height:18px;
  width:18px;
  animation-delay:.2s;
}
.inner:nth-child(3){
    
  height:16px;
  width:16px;
  animation-delay:.4s;
}
.inner:nth-child(4){
    
  height:14px;
  width:14px;
  animation-delay:.6s;
}
@keyframes an-circle{
    
  to{
    
    transform:rotate(1turn);
  }
}

参考

CSS3之transform-origin详解

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_36699230/article/details/120693688

智能推荐

深入学习Gremlin(3):has条件过滤_linlin1989117的博客-程序员宝宝_gremlin模糊查询

第3期 Gremlin Steps:hasLabel(labels…​)、hasId(ids…​)、has(key, value)、has(label, key, value)、has(key, predicate)、hasKey(keys…​)、hasValue(values…​)、has(key)、hasNot(key)本系列文章的Gremlin示例均在HugeGraph图数据库上执行...

PAT 1018 Public Bike Management (30)_ryo_218的博客-程序员宝宝

1018 Public Bike Management (30)(30 分)There is a public bike service in Hangzhou City which provides great convenience to the tourists from all over the world. One may rent a bike at any station and...

【STM32F429】第4章 RL-USB移植(MDK AC5)_嵌入式系统OS的博客-程序员宝宝

论坛原始地址(持续更新):http://www.armbbs.cn/forum.php?mod=viewthread&amp;tid=99710第4章 RL-USB移植(MDK AC5)本章教程为大家讲解RL-USB协议栈的AC5编译器移植。目录第4章 RL-USB移植(MDK AC5)4.1 初学者重要提示4.2 移植RL-USB整体说明4.3 了解RL-USB模板框架设计4.4 第1步,安装指定的MDK软件包4.5 第2步,准备一个工程模...

flutter----Scaffold参数说明_h309849232的博客-程序员宝宝_scaffold 参数

Scaffold({ Key key, this.appBar, // 标题栏 this.body, // 用于显示当前界面主要内容的Widget this.floatingActionButton, // 一个悬浮在body上的按钮,默认显示在右下角 this.floatingActionButtonLocation, // 用于设置floatingActionButton显示的位置 this.floatingActionButtonAnimator, // floatingA.

网易戏精ARCore短视频新玩法实践_糖糖糖糖糖糖糖糖糖糖糖糖糖糖糖糖糖糖的博客-程序员宝宝

《网易戏精》是网易人工智能事业部旗下一款AI短视频产品,用户可以随手拍出自己的特效视频,其中包含数十个有趣的奇幻道具,其中放置类的道具只需要扫一下平面,即可摆放进现实世界中进行互动,既有充满霓虹灯的旺角街头、会随音乐抖动的DJ打碟台、迪厅球,也有烟雾缭绕的迷幻场景等等。(会随音乐抖动的DJ打碟台)此类放置类道具在安卓端基于Google的ARCore技术实现。本文整理归纳项目研发中ARCore的使用...

本地缓存解决方案-Google Guava Caffeine Cache_AlbenXie的博客-程序员宝宝

1.1 关于Caffeine CacheGoogle Guava Cache是一种非常优秀本地缓存解决方案,提供了基于容量,时间和引用的缓存回收方式。基于容量的方式内部实现采用LRU算法,基于引用回收很好的利用了Java虚拟机的垃圾回收机制。其中的缓存构造器CacheBuilder采用构建者模式提供了设置好各种参数的缓存对象,缓存核心类LocalCache里面的内部类Segment与jdk1.7及以前的ConcurrentHashMap非常相似,都继承于ReetrantLock,还有六个队列,以实现丰富

随便推点

强制重启计算机_我的计算机如何能够自行重启?_culunxun2863的博客-程序员宝宝

强制重启计算机It’s such a common place activity that most of us have likely never stopped to even think about it: the automatic restart. Whether user or application-initiated, what exactly happens when your ...

Jmeter+Ant+Jenkins接口自动化框架(全)_張三疯的博客-程序员宝宝_jmeter+jenkins接口自动化框架

1.下载安装Jmeter 1.1下载安装官方下载地址:http://jmeter.apache.org/download_jmeter.cgi下载到本地(自己可以找到的目录 最好都是英文) 1.2配置环境变量:JMETER_HOME:D:\apache-jmeter-3.3(自己就下载的地址) CLASSPATH为 %JMETER_HOME%\lib PATH为%JME...

搭建自己的博客(二十八):自定义用户模型_weixin_30376083的博客-程序员宝宝

2、变化的部分{% load staticfiles %}&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;!-- 根据屏幕自动响应布局 --&gt; &lt;meta name="viewport" cont...

Android 的网络编程(14)-ttpClient访问服务器的servlet_javawebsoa的博客-程序员宝宝

登陆页面输入用户名和密码,登陆成功后跳转到主页面,失败时显示错误信息。 传递参数时用BasicNameValuePair的List以httpPost.setEntity的方式来做,不能用HttpParams。 userName = (EditText) this.findViewById(R.id.editTextUserName); password = (E

谈谈final,finally,finalize的区别_xyh08180的博客-程序员宝宝

第一,谈谈final,finally,finalize的区别。final?修饰符(关键字)如果一个类被声明为final,意味着它不能再派生出新的子类,不能作为父类被继承。因此一个类不能既被声明为abstract的,又被声明为final的。将变量或方法声明为final,可以保证它们在使用中不被改变。被声明为final的变量必须在声明时给定初值,而在以后的引用中只能读取,不可修改。被声明为fi

非图形方式静默安装与配置 Oracle 11g RAC(9)——静默安装 grid 软件_睿思达DBA_WGX的博客-程序员宝宝

非图形方式静默安装与配置 Oracle 11g RAC(9)——静默安装 grid 软件一、修改 grid 静默安装响应文件[[email protected] grid]$ pwd/soft/grid/grid[[email protected] grid]$ lsinstall readme.html response rpm runcluvfy.sh runInstaller sshsetup stage welcome.html[[email protected] grid]$ cd response/[[email protected]