transform-origin学习笔记之旋转与基点的关系

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

请看示例：

一.2D情况下：

html源码：

<nav><div></div></nav>

css源码：

nav{width: 200px;height: 200px;background-color: blue;}div,div::before{   width: 100px;   height: 50px;   background-color: red;   border-top-left-radius: 25px;   border-top-right-radius: 25px;   position: absolute;   top: 75px;}div{margin-left: 50px;}div::before{content: "";display: block;top:0px;left: 0px;transform: rotate(45deg);        background-color: yellow;}

效果如图：

分别修改基点为左上（transform-origin:left top），

左transform-origin:(left);

上(transform-origin:top);

中(transform-origin:center center);

并观察元素位置。

当只设置一个值时，另一方向默认值为center。

二.3D情况下：

在三维情况下，这里只针对rotateX、rotateY、rotateZ几个常用的方法做个记录。以rotateX为例；

html源码：

<nav><div>1</div><div>2</div><div>3</div></nav>

css源码：

nav{width: 500px;height: 500px;border: 2px solid black;transform-style: preserve-3d;animation: aaa 5s infinite;}nav:hover{animation-play-state: paused;}div{width: 200px;height: 200px;position: absolute;top: 150px;left: 150px;opacity: 0.6;text-align: center;line-height: 200px;font-size: 100px;color: white;}div:nth-of-type(1){background: red;}div:nth-of-type(2){background: yellow;transform: translateZ(-200px) rotate(180deg);}div:nth-of-type(3){background: green;transform: rotateX(90deg);transform-origin: bottom;}@keyframes aaa {0% {transform: translateZ( -100px) rotateX( 0deg) rotateY( 0deg);}100% {transform: translateZ( -100px) rotateX( 90deg) rotateY( 90deg);}

为了能直观地观察，在CSS里面添加了一段动画。下面是以第三个DIV为例，transform-origin分别为bottom，center以及top的效果。

由于第三个DIV是从第一个DIV处变换而来，从上图可知，当div沿X轴旋转时，从X轴正方向往负方向看去，DIV块是做逆时针旋转。基点的top|center|bottom值在三维空间设定的是旋转轴的位置分别位于顶部，中间和底部。同理，当沿Y轴旋转时，transform-origin设置的分别是轴在左边、中间和右边。前面说过，transform最多能取两个值，一个水平值，一个垂直值。在二位空间中的旋转，放到三维空间来看实际上是沿着Z轴旋转，此时能取9个值，而当沿X轴旋转时，水平方向的取值失效，只需设置垂直方向的值即可；同理，沿Y轴旋转时，垂直方向的取值失效，只需设置水平方向的值即可，这两种情况都只有三个可能的取值。