transform-origin,多个动画放一起执行

/* 旋转 */
div:nth-of-type(3):active {
	/* 设置旋转轴心origin：
	 1.x,y
	 2.关键字：left，top，right，bottom，center*/
	/* transform-origin: right top;
	transform:rotate(150deg); */
}
div:nth-of-type(3):active {
	/* transform:rotate(150deg); */
	/* 同时添加多个transform属性，中间用空格分割，旋转会将当前的坐标系也旋转了。 */
	/* 建议先添加移动，再添加旋转效果。 */
	transform:rotate(-150deg) scale(0.5);
}

origin：扑克牌，实现散开酷炫效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>扑克牌效果</title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}
			.pxBox {
				width: 155px;
				height: 219px;
				position: relative;
				margin: 300px auto;
				background-color: #006400;
			}
			.pxBox>img {
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0;
				top: 0;
				/* 添加过渡效果 */
				transition: transform 2s;
				transform-origin: right top;
			}
			/* 添加鼠标移动，上移的效果 */
			.pxBox:hover>img:nth-last-of-type(1) {
				transform: rotate(60deg);
			}
			.pxBox:hover>img:nth-last-of-type(2) {
				transform: rotate(120deg);
			}
			.pxBox:hover>img:nth-last-of-type(3) {
				transform: rotate(180deg);
			}
			.pxBox:hover>img:nth-last-of-type(4) {
				transform: rotate(240deg);
			}
			.pxBox:hover>img:nth-last-of-type(5) {
				transform: rotate(300deg);
			}
			.pxBox:hover>img:nth-last-of-type(6) {
				transform: rotate(360deg);
			}
		</style>
	</head>
	<body>
		<div class="pxBox">
			<img src="../images/puke01.png" alt="">
			<img src="../images/puke02.png" alt="">
			<img src="../images/puke03.png" alt="">
			<img src="../images/puke04.png" alt="">
			<img src="../images/puke01.png" alt="">
			<img src="../images/puke02.png" alt="">
		</div>
	</body>
</html>

盾牌九宫格效果例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>添加多个transform：14盾牌效果</title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}

			body {
				background-color: #31965b;
			}
			.box {
				width: 340px;
				margin: 100px auto ;
			}
			.box >img{
				transition: transform 2s;
			}
			
			.box>img:nth-of-type(1){
				transform: translate(100px ,10px) rotate(60deg);
			}
			.box>img:nth-of-type(2){
				transform: translate(-100px ,100px) rotate(-60deg);
			}
			.box>img:nth-of-type(3){
				transform: translate(-100px ,-60px) rotate(90deg);
			}
			.box>img:nth-of-type(4){
				transform: translate(10px ,60px) rotate(-40deg);
			}
			.box>img:nth-of-type(5){
				transform: translate(90px ,30px) rotate(70deg);
			}
			.box>img:nth-of-type(6){
				transform: translate(-60px ,-20px) rotate(20deg);
			}
			.box>img:nth-of-type(7){
				transform: translate(20px ,70px) rotate(60deg);
			}
			.box>img:nth-of-type(8){
				transform: translate(60px ,40px) rotate(160deg);
			}
			.box>img:nth-of-type(9){
				transform: translate(10px ,-50px) rotate(-160deg);
			}
			.box:hover>img{
				transform: none;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<img src="../images/thermostat_cold_off.png">
			<img src="../images/thermostat_cold_on.png">
			<img src="../images/thermostat_hot_off.png">
			<img src="../images/thermostat_hot_on.png">
			<img src="../images/thermostat_cold_off.png">
			<img src="../images/thermostat_cold_off.png">
			<img src="../images/thermostat_hot_on.png">
			<img src="../images/thermostat_cold_off.png">
			<img src="../images/thermostat_hot_on.png">
		</div>
	</body>
</html>

transform-origin,多个动画放一起执行

猜你喜欢