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

语法:

transform-origin:[ <percentage> | <length> | left | center① | right ] [ <percentage> | <length> | 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%):

transform-origin取值为top(或top center或center top或50% 0):

transform-origin取值为right(或right center 或center right 或 100% 或 100% 50%):

transform-origin取值为bottom(或bottom center 或center bottom 或 50% 100%):

transform-origin取值为left(或left center或center left或0或0 50%):

transform-origin取值为top left(或left top或0 0):

transform-origin取值为right top(或top right或100% 0):

transform-origin取值为bottom right(或right bottom或100% 100%):

transform-origin取值为left bottom(或bottom left 或 0 100%):

参考文章:http://www.w3cplus.com/css3/t...

css3属性transform-origin属性讲解的更多相关文章

  1. css3 transform 变形属性详解

    本文主要介绍了css3 属性transform的相关内容,针对CSS3变形.CSS3转换.CSS3旋转.CSS3缩放.扭曲和矩阵做了详细的讲解.希望对你有所帮助. 这个很简单,就跟border-rad ...

  2. CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)

    CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)   在CSS3中,可以利用transform功能来实现文字或图像的旋转.缩放.倾 ...

  3. CSS3中动画属性transform、transition和animation

    Transform:变形 在网页设计中,CSS被习惯性的理解为擅长表现静态样式,动态的元素必须借助于javascript才可以实现,而CSS3的出现改变了这一思维方式.CSS3除了增加革命性的创新功能 ...

  4. 基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转

    基于css3新属性transform,实现3d立方体的旋转 通过原生JS,点击事件,鼠标按下.鼠标抬起和鼠标移动事件,实现3d立方体的拖动旋转,并将旋转角度实时的反应至界面上显示 实现原理:通过获取鼠 ...

  5. CSS3中动画属性transform、transition 和 animation

    CSS3中和动画有关的属性有三个 transform.transition 和 animation.下面来一一说明:        transform   从字面来看transform的释义为改变,使 ...

  6. CSS3中transform几个属性值的注意点

    transform(变形)是CSS3中的元素的属性,transform的属性值主要包括旋转rotate.扭曲skew.缩放scale和移动translate以及矩阵变形matrix 基本用法可以参考文 ...

  7. 【CSS3 transform属性和过渡属性详解】

    CSS3transform属性详解 transform字面上就是变形,改变的意思. 在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放scale和移动translat ...

  8. CSS3属性transform详解【转载】

    CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)   在CSS3中,可以利用transform功能来实现文字或图像的旋转.缩放.倾 ...

  9. CSS3那些不为人知的高级属性

    尽管现代浏览器已经支持了众多的CSS3属性,但是大部分设计师和开发人员貌似依然在关注于一些很“主流”的属性,如border-radius.box-shadow或者transform等.它们有良好的文档 ...

  10. CSS3学习之 animation 属性

    发现animation这个新属性很有趣,在此学习,并整理下!  浏览器支持: Internet Explorer 10.Firefox 以及 Opera 支持 animation 属性: Safari ...

随机推荐

  1. 第12课.经典问题解析(const;指针和引用)

    问题1:const什么时候为只读变量?什么时候是常量? const常量的判别准则: a.只有用字面量初始化的const常量才会进入符号表(直接初始化过的const为常量) b.被使用其他变量初始化的c ...

  2. Springboot使用launch.script打包后解压缩

    今天拿到一个SpringBoot的jar需要反编译看一下.直接用工具试了下提示报错. 于是用文本工具打开看了下,发现此JAR包在打包时候引入了启动脚本.如下图: 为了反编译,可以直接将所有启动脚本相关 ...

  3. 【Python】【demo实验5】【练习实例】【多个数字组合成不重复三位数】

    题目:有四个数字:1.2.3.4,能组成多少个互不相同且无重复数字的三位数?各是多少? 程序分析:可填在百位.十位.个位的数字都是1.2.3.4.组成所有的排列后再去 掉不满足条件的排列. 程序源代码 ...

  4. Response.write()弹出窗口的问题!

    今天偶然发现在.NET中使用Javascript语句弹出窗口时发现一个小小的问题! 例子如下: 1: Response.Write ("<script languge=javascri ...

  5. Jmeter之TCP取样器(模拟数据上报压测)

    TCP压测 场景:模拟硬件设备上报数据(登录,心跳,GPS定位数据/光感数据/电量数据),对这个功能进行压测 啰嗦一句:TCP压测很简单,只要调通了一个TCP,后续的逻辑判断就用逻辑控制器和正则处理就 ...

  6. django 项目开发及部署遇到的坑

    1.django 连接oracle数据库遇到的坑 需求:通过plsql建立的oracle数据表,想要django操作这几个表 python manage.py inspectdb table_name ...

  7. Java源码 HashMap<K,V>

    HashMap类 https://docs.oracle.com/javase/8/docs/api/java/util/HashMap.html public class HashMap<K, ...

  8. Spring 的 AOP 概述和底层实现

    Spring 的 AOP 概述和底层实现 1. 什么是 AOP AOP (Aspect Oriented Programing),即面向切面编程 AOP 采取横向抽取机制,取代了传统纵向继承体系重复性 ...

  9. 怎样使用 Vue 的监听属性 watch ?

    需求: 我需要在某个数据变化时能够执行特定的动作, 比如我在输入框中输入数字 88, 系统检测到以后就会弹窗 拜拜 , 而输入其他字符则不会触发, 这种需求简直多入牛毛, 实际上这就是 自定义事件 , ...

  10. 版本控制工具SVN学习

    教学视频链接:https://edu.aliyun.com/course/83?spm=5176.10731334.0.0.778e6580zC0Ri0 版本控制工具SVN学习 1,SVN的简介 在实 ...