• 首页
  • css3教程
  • html5教程
  • jQuery手册
  • php7教程
  • MySQL手册
  • apache手册
  • transform-origin

    版本:CSS3

    transform-origin CSS属性让你更改一个元素变形的原点

    示例

    /* one-value syntax */
    transform-origin: 2px;
    transform-origin: bottom;
    
    /* x-offset  |  y-offset */
    transform-origin: 3cm 2px;
    
    /* x-offset-keyword  |  y-offset */
    transform-origin: left 2px;
    
    /* x-offset-keyword  |  y-offset-keyword */
    transform-origin: right top;
    
    /* y-offset-keyword  |  x-offset-keyword */
    transform-origin: top right;
    
    /* x-offset  |  y-offset  |  z-offset */
    transform-origin: 2px 30% 10px;
    
    /* x-offset-keyword  |  y-offset  |  z-offset */
    transform-origin: left 5px -3px;
    
    /* x-offset-keyword  |  y-offset-keyword  |  z-offset */
    transform-origin: right bottom 2cm;
    
    /* y-offset-keyword  |  x-offset-keyword  |  z-offset */
    transform-origin: bottom right 2cm;
    
    /* global values */
    transform-origin: inherit;
    transform-origin: initial;
    transform-origin: unset;
    

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

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

    浏览器支持

    IE浏览器火狐浏览器opera浏览器chrome浏览器safari浏览器
    IE9以上版本的浏览器都支持transform

    语法

    transform-origin:x-offsety-offset| offset-keywordx-offset-keywordy-offset-keyword| z-offset

    取值

    • x-offset:定义变形中心距离盒模型的左侧的<length><percentage>偏移值。
    • y-offset:定义变形中心距离盒模型的顶的<length><percentage>偏移值。
    • offset-keywordleftrighttopbottomcenter中之一,定义相对应的变形中心偏移。
    • x-offset-keywordleftrightcenter中之一,定义相对应的变形中心偏移。
    • y-offset-keywordtopbottomcenter中之一,定义相对应的变形中心偏移。
    • z-offset:定义变形中心距离用户视线(z=0处)的<length>(不能是<percentage>)偏移值。

    关键字是方便的简写方法,等同于以下<percentage>值:

    keywordvalue
    left0%
    center50%
    right100%
    top0%
    bottom100%
    默认值50% 50%,效果等同于center center
    适用于所有块级元素及某些内联元素
    继承性
    动画性当值为数值时
    计算值除了指定绝对值,否则都为百分比

    实例

    div{
     transform:rotate(45deg);
     transform-origin:20% 40%;
     -ms-transform:rotate(45deg); /*ie9*/
     -ms-transform-origin:20% 40%; /*ie9*/
     -webkit-transform:rotate(45deg); /*safari and chrome*/
     -webkit-transform-origin:20% 40%; /*safari and chrome*/
    }
    

    上篇:transform

    下篇:backface-visibility