2D

最新推荐文章于 2022-01-24 12:04:47 发布

端脑

最新推荐文章于 2022-01-24 12:04:47 发布

阅读量288

点赞数

分类专栏：前端文章标签： 2D

本文链接：https://blog.csdn.net/qq_43776742/article/details/103394270

版权

前端专栏收录该内容

90 篇文章 2 订阅

订阅专栏

2D变形
绝对定位的盒子水平居中
2D变形之缩放
2D变形之旋转
变形中心点
2D变形之倾斜

2D变形

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	   div {
	   	  width: 140px;
	   	  height: 140px;
	   	  background-color: green;
	   	  transition: all 1s;
	   }

	   div:active {
	   	  /*变形    移动*/
	   	  /* transform: translateX(1000px); */
	   	 /*  transform: translateY(100px); */
	   	 /* transform: translate(200px); *//*一个数字表示x轴*/
	   	 transform: translate(200px,100px);
	   }
	</style>
</head>
<body>
	 <div>
	 	
	 </div>
</body>
</html>

绝对定位的盒子水平居中

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	   div {
	   	  width: 400px;
	   	  height: 200px;
	   	  background: red;
	   	  position: absolute;
	   	  left: 50%; /*参考父亲的宽度*/
	   	  top: 50%;
	   	  /* margin-left: -100px; */
	   	  /*下面的百分比以自己的盒子做参考*/
	   	  transform: translate(-50%,-50%);
	   }
	</style>
</head>
<body>
	<div></div>
</body>
</html>

2D变形之缩放

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	    div {
	    	width: 100px;
	    	height: 100px;
	    	background-color: blue;
	    	margin: 50px auto;
	    	transition: all 1s;
	    }

	    div:hover {
	    	transform: scale(2);
	    }

	    section {
	    	width: 150px;
	    	height: 150px;
	    	margin: 0 auto;
	    	overflow: hidden;
	    }

	    section img {
	    	transition: all 1s; /*过渡  谁要做动画 谁加过渡*/
	    }

	    section:hover img {
	    	transform: scale(1.2);
	    }
	</style>
</head>
<body>
	<div></div>
	<section>
		<img src="img/img.jpg" alt="">
	</section>
</body>
</html>

2D变形之旋转

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	    img {
	    	margin: 100px;
	    	border-radius: 50%;
	    	transition: all 1s;
	    }
	    img:hover {
	    	transform: rotate(1080deg);/*deg表示度数*/
	    }
	</style>
</head>
<body>
	<img src="img/img.jpg" alt="">
</body>
</html>

变形中心点

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	   img {
	   	   width: 200px;
	   	   margin: 100px;
	   	   transition: all 1s;
	   	   transform-origin: 50px 60px;
	   }

	   img:hover {
	   	   transform: rotate(360deg);
	   }

	   div {
	   	  width: 200px;
	   	  margin: 0 auto;
	   	  position: relative;
	   }

	   div img {
	   	   position: absolute;
	   	   left: 0;
	   	   top: 0;
	   	   transform-origin:top right;
	   }

	   div:hover img:nth-child(1) {
	   	    transform: rotate(60deg);
	   }

	   div:hover img:nth-child(2) {
	   	    transform: rotate(120deg);
	   }

	   div:hover img:nth-child(3) {
	   	    transform: rotate(180deg);
	   }

	   div:hover img:nth-child(4) {
	   	    transform: rotate(240deg);
	   }

	   div:hover img:nth-child(5) {
	   	    transform: rotate(300deg);
	   }

	   div:hover img:nth-child(6) {
	   	    transform: rotate(360deg);
	   }


	</style>
</head>
<body>
	<img src="img/pk.jpg" alt="">
	<div>
		<img src="img/pk.jpg" alt="">
		<img src="img/pk.jpg" alt="">
		<img src="img/pk.jpg" alt="">
		<img src="img/pk.jpg" alt="">
		<img src="img/pk.jpg" alt="">
		<img src="img/pk.jpg" alt="">
	</div>
</body>
</html>

2D变形之倾斜

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	   div {
	   	  font-size: 50px;
	   	  font-weight: 700;
	   	  margin: 100px;
	   	  transition: all 1s;
	   }

	   div:hover {
	   	   transform: skew(0,-30deg);
	   }
	</style>
</head>
<body>
	<div>钓鱼岛是中国的</div>
</body>
</html>

返回目录

端脑

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2D

2D变形<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> div { width: 140px; h...
复制链接

扫一扫