- transform-origin
用 transform-origin 時(shí)，坐標(biāo)系實(shí)際上是這樣的
1.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS 2D轉(zhuǎn)換</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;
/* 我們可以通過(guò)改變 位置觀察變化罐盔，默認(rèn)是在中心點(diǎn)信夫，第一個(gè)參數(shù)為X軸方向潭辈，第二個(gè)在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);
}
/*轉(zhuǎn)換原點(diǎn)不影響translate位移,會(huì)影響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>
