- transform-origin
用 transform-origin 时，坐标系实际上是这样的
1.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS 2D转换</title>
<style>
body {
margin: 0;
padding: 0;
background-color: #F7F7F7;
}
.box {
width: 155px;
height: 219px;
margin: 200px auto;
position: relative;
}
.box img {
position: absolute;
left: 0;
top: 0;
width: 100%;
transition: all 5s;
/* 我们可以通过改变 位置观察变化，默认是在中心点，第一个参数为X轴方向，第二个在Y轴方向*/
/*transform-origin: right top;*/
transform-origin: 100% 50%;
-ms-transform-origin:100% 50%; /* IE 9 */
-webkit-transform-origin:30% 40%; /* Safari and Chrome */
}
.box:hover img:nth-child(1) {
transform: rotate(60deg);
}
.box:hover img:nth-child(2) {
transform: rotate(120deg);
}
.box:hover img:nth-child(3) {
transform: rotate(180deg);
}
.box:hover img:nth-child(4) {
transform: rotate(240deg);
}
.box:hover img:nth-child(5) {
transform: rotate(300deg);
}
.box:hover img:nth-child(6) {
transform: rotate(360deg);
}
/*转换原点不影响translate位移,会影响scale缩放位置*/
</style>
</head>
<body>
<div class="box">
<img src="..." alt="">
<img src="..." alt="">
<img src="..." alt="">
<img src="..." alt="">
<img src="..." alt="">
<img src="..." alt="">
</div>
</body>
</html>
