CSS3多过渡效果

效果展示：
在这里插入图片描述
知识点：
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);
        }
        .box > img:nth-of-type(3){
            transform: translate(200px,200px) rotate(60deg);
        }
        .box > img:nth-of-type(4){
            transform: translate(-200px,-200px) rotate(-60deg);
        }
        .box > img:nth-of-type(5){
            transform: translate(150px,150px) rotate(90deg);
        }
        .box > img:nth-of-type(6){
            transform: translate(50px,150px) rotate(-90deg);
        }
        .box > img:nth-of-type(7){
            transform: translate(-150px,-150px) rotate(60deg);
        }
        .box > img:nth-of-type(8){
            transform: translate(10px,-250px) rotate(-90deg);
        }
        .box > img:nth-of-type(9){
            transform: translate(-250px,10px) rotate(45deg);
        }

		.box:hover > img {
			transform:none;
		}
	</style>
</head>
<body>
	<div class="box">
		<img src="images/shield_1_01.png" alt="">
		<img src="images/shield_1_02.png" alt="">
		<img src="images/shield_1_03.png" alt="">
		<img src="images/shield_1_04.png" alt="">
		<img src="images/shield_1_05.png" alt="">
		<img src="images/shield_1_06.png" alt="">
		<img src="images/shield_1_07.png" alt="">
		<img src="images/shield_1_08.png" alt="">
		<img src="images/shield_1_09.png" alt="">
	</div>
</body>
</html>

本文属个人学习整理记载

猜你喜欢