transform样式写盾牌

最新推荐文章于 2022-07-29 17:09:07 发布

AC_meimei

最新推荐文章于 2022-07-29 17:09:07 发布

阅读量237

点赞数 2

文章标签： css3

本文链接：https://blog.csdn.net/weixin_45276056/article/details/105152461

版权

1.transform变换样式有哪些样式？

			transform:   rotate(45deg旋转的角度值) 正值为顺时针，负值为逆时针。
			transform：	 translate(x/y位移 ) x轴和y轴,
							也可以写成 translateX(...)和translateY(...)。
			transform：	 scale(2横向放大，3纵向放大)。
			transform：	 skew(x,y) 或者skewX(30deg)和skewY(...)倾斜。
			animation:   scaleX(负值) 沿Y轴翻转 	scaleY(负值) 沿X轴翻转。

提示：做盾牌就是把碎片化的图片拼在一起，提前准备几张图，当然，我这个盾牌用了九张图片。

2.代码演示：

html部分：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>transform样式</title>
		<link rel="stylesheet" href="../css/transform.css" />
	</head>
	<body>
		<div class="font">请把鼠标放在碎片上</div>
		<div class="pictures">
			<img src="../img/shield_1_01.png">
			<img src="../img/shield_1_02.png">
			<img src="../img/shield_1_03.png">
			<img src="../img/shield_1_04.png">
			<img src="../img/shield_1_05.png">
			<img src="../img/shield_1_06.png">
			<img src="../img/shield_1_07.png">
			<img src="../img/shield_1_08.png">
			<img src="../img/shield_1_09.png">
		</div>
	</body>
</html>

CSS部分：

*{
		margin: 0;
		padding: 0;
	}
	body{	/* 给背景设置颜色 */
		background-color: deepskyblue;
	}
	.pictures{	/* 固定宽高 */
		width: 500px;
		height: 500px;
		margin: 100px auto;
	}
	.pictures img:nth-child(1){
		transform: translate(-100px,50px) rotate(45deg);
		transition: all 1s linear; 
	}
	.pictures img:nth-child(2){
		transform: translate(-300px,180px) rotate(145deg);
		transition: all 1s linear; 
	}
	.pictures img:nth-child(3){
		transform: translate(200px,-40px) rotate(245deg);
		transition: all 1s linear; 
	}
	.pictures img:nth-child(4){		
		transform: translate(150px,-80px) rotate(245deg);
		transition: all 1s linear; 
	}.pictures img:nth-child(5){		
		transform: translate(100px,-180px) rotate(345deg);
		transition: all 1s linear; 
	}
	.pictures img:nth-child(6){		
		transform: translate(200px,-100px) rotate(145deg);
		transition: all 1s linear; 
	}
	.pictures img:nth-child(7){		
		transform: translate(250px,50px) rotate(245deg);
		transition: all 1s linear; 
	}
	.pictures img:nth-child(8){		
		transform: translate(300px,100px) rotate(145deg);
		transition: all 1s linear; 
	}
	.pictures img:nth-child(9){		
		transform: translate(180px,150px) rotate(45deg);
		transition: all 1s linear; 
	}
	.pictures:hover img{	/* 鼠标点击时 */
		transform: translate(0,0) rotate(0deg);
	}
	.font{
		color: white;
		font-size: 50px;
		margin: 100px 700px;
	}

3.盾牌的效果图：

未点击的效果：
在这里插入图片描述
鼠标放在碎片上的效果：

如果要图片请关注我，私信我就可以了，希望对你有帮助。

AC_meimei

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
transform样式写盾牌

1.transform变换样式有哪些样式？ transform: rotate(45deg旋转的角度值) 正值为顺时针，负值为逆时针。 transform： translate(x/y位移 ) x轴和y轴, 也可以写成 translateX(...)和translateY(...)。 transform： scale(2横向放大，3纵向放大)。 tra...
复制链接

扫一扫