效果展示:
知识点:
1…box > img:nth-of-type(1)
表示选择box下的第一个img
2. transform: translate(100px,100px) rotate(30deg);
多过度效果,该行代码表示先进行平移在旋转
注: transform: rotate(30deg) translate(100px,100px);
如果写成这样是先旋转在平移,旋转时也会把坐标系旋转,带来不一样的效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>多过渡效果</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
background: green;
}
.box {
width: 425px;
height: auto;
margin: 100px auto;
}
img {
transition:transform 1s;
}
.box > img:nth-of-type(1){
transform: translate(100px,100px) rotate(30deg);
}
.box > img:nth-of-type(2){
transform: translate(-100px,-100px) rotate(-30deg)