版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/sakenc/article/details/87913487
变形–原点 transform-origin:任何一个元素都有一个中心点，默认情况之下，其中心点是居于元素X轴和Y轴的50%处。
在没有重置transform-origin改变元素原点位置的情况下，CSS变形进行的旋转、位移、缩放，扭曲等操作都是以元素自己中心位置进行变形。但很多时候，我们可以通过transform-origin来对元素进行原点位置改变，使元素原点不在元素的中心位置，以达到需要的原点位置。
transform-origin取值和元素设置背景中的background-position取
值类似，如下表所示：
关键字 百分数
top=top center 50% 0
left=left center 0 50%
bottom=bottom center 50% 100%
right=right center 100% 50%
center=center center 50% 50%
top left=left top 0 0
top right=right top 0 100%
bottom left =left bottom 100% 0
bottom right=right bottom 100% 100%
用法：transform-origin: left;
效果：
html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>06变形--原点 transform-origin</title>
<link href="css/style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div class="wrapper">
<div>原点在默认位置处</div>
</div>
<div class="wrapper transform-origin">
<div>原点重置到上中（top=top center）</div>
</div>
</body>
</html>
css
@charset "utf-8";
/* CSS Document */
* {
margin:0;
padding:0;
}
.wrapper {
width: 300px;
height: 300px;
float: left;
margin: 100px;
border: 2px dotted red;
line-height: 300px;
text-align: center;
}
.wrapper div {
background: orange;
-webkit-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
transition: all 1s;
}
.transform-origin div {
/*-webkit-transform-origin: left;*/
transform-origin: 50% 0;
}
.transform-origin div:hover{
transform: rotate(-45deg);
}