transform-origin

transform-origin 属性更改元素变形的原点。例如，rotate()的transform-origin 是旋转的中心点 (这个属性的应用原理是先用这个属性的负值translate该元素，进行变形，然后再用这个属性的值把元素translate回去)。

语法

/* 单值语法 */
transform-origin: 20px;
transform-origin: bottom;
  
/* 双值语法 */
/* 用两个数字值先水平后垂直，用一个数值一关键字或两关键字不强求顺序 */
transform-origin: 5cm 3px;   /* x-offset y-offset */
transform-origin: 3px left;  /* y-offset x-offset-keyword */
transform-origin: left 3px;  /* x-offset-keyword y-offset */
transform-origin: right top; /* x-offset-keyword y-offset-keyword */
transform-origin: top right; /* y-offset-keyword x-offset-keyword */
  
/* 三值语法 */
transform-origin: 3px 50% 5px;     /* x-offset y-offset z-offset */
transform-origin: 3px left 5px;    /* y-offset x-offset-keyword z-offset */
transform-origin: left 5px -3px;    /* x-offset-keyword y-offset z-offset */
transform-origin: right bottom 20px; /* x-offset-keyword y-offset-keyword z-offset */
transform-origin: bottom right 20px; /* y-offset-keyword x-offset-keyword z-offset */

值

值	描述
x-offset	<length>或<percentage>,规定变形中心距离盒模型左上角的水平偏移值。
offset-keyword	left，right，top，bottom或center中之一，规定相对应的变形中心偏移。
y-offset	<length>或<percentage>,规定变形中心距离盒模型左上角的垂直偏移值。
x-offset-keyword	left，right或center中之一，规定相对应的变形中心偏移。
y-offset-keyword	top，bottom或center中之一，规定相对应的变形中心偏移。
z-offset	<length>，规定变形中心距离用户视线（z=0处）的偏移值。

例子

HTML

<div class="stage">
  <div class="box"></div> 
</div>

CSS

.stage{width:100px;height:100px;}
.box {
  width:50px; height:50px;
  background:red;
  animation:flipAround 4s infinite;
  transform-origin:right;
}
@keyframes 'flipAround' {
  25% { 
    transform-origin:right; 
    animation-mode:forwards;
    transform:rotateY(-180deg);
  }
  25.001% {
    transform-origin:bottom;
    transform:translateX(50px); 
  }
  50% { 
    transform-origin:bottom; 
    transform:translateX(50px) rotateX(-180deg);
  }
  50.001% { 
    transform-origin:left; 
    transform:translateX(50px) translateY(50px);
  }
  75% { 
    transform-origin:left; 
    transform:translateX(50px) translateY(50px) rotateY(180deg); 
  }
  75.001% { 
    transform-origin:top; 
    transform:translateY(50px); 
  }
  100% { 
    transform-origin:top; 
    transform:translateY(50px) rotateX(180deg);
  }
}

执行结果

参考

相关页面

transform


跳至内容顶部