分享Web 开发技术CSS：层叠样式表transform

无论是transition还是animation，都只是浏览器帮助我们实现css属性的动态改变，并根据屏幕帧率实现更自然的动画效果。但本质上css的属性改变还是会触发页面的【重绘】【重排】，因此他们的渲染成本是比较高的。

然而transform的待遇则更高级，由于transform可能涉及3D的动画效果，浏览器会为transform的元素单独生成一个图层，并使用GPU进程单独渲染。因此但触发transform效果的时候，是不会影响主图层的，因此不会触发重绘和重排，效率更高。

同时，由于transform的内容是GPU进程渲染的，所以即使浏览器渲染进程阻塞了，我们会发现transform的动画仍然会正常运行。

CSS transform 属性允许你旋转，缩放，倾斜或平移给定元素。这是通过修改 CSS 视觉格式化模型的坐标空间来实现的。

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

 transform-style 设置元素的子元素是位于 3D 空间中还是平面中。

小试牛刀实现旋转的风扇，叶片每10秒旋转一圈：

.run{
    width: 300px;
    height: 300px;
    animation: fan_rotate 10s linear infinite;
    transform-origin: 150px 150px;
}
@keyframes fan_rotate{
	0%{
		transform: rotate(0deg);
	}
	100%{
		transform: rotate(360deg);
	}
}

参见：

transform - CSS：层叠样式表 | MDN