在CSS3变形中，任何元素都有一个中心原点。默认情况下，元素的中心原点位于x轴和y轴的50%处，如下图所示。
默认情况下，CSS3的各种变形（平移、缩放、倾斜等）都是以元素的中心原点进行变形的。假如我们想要使得变形的中心原点不是原来的中心位置，该怎么办呢？
在CSS3中，我们可以使用transform-origin属性来改变元素的中心原点。
transform-origin: 取值;
transform-origin属性取值有两种：一种是“长度值”；另外一种是“关键字”。当取值为长度值时，单位可以为px、em和百分比等。当取值为关键字时，这个跟background-position属性取值是相似的，如下表所示。
transform-origin属性取值为“关键字”
background-color: lightskyblue;
transform-origin:right center;
transform:rotate(30deg);
</style>
</head>
<div id="origin">
<div id="current"></div>
</div>
</body>
</html>
浏览器预览效果如下图所示。
这里使用“transform-origin: right center;”使得变形的中心原点由“正中”变为“靠右居中”。因此元素的旋转是围绕“新中心原点”作为旋转的中心原点的。
本站所有教程均为原创，大部分已由人民邮电出版社出版成书。禁止转载和抄袭，否则绿叶学习网和人民邮电出版社必将追究法律责任，附录：互联网著作权行政保护法（法律顾问：张俊律师）
7.5 旋转：rotate()
请不要重复点赞喔