WEB前端 | H5基础——(2)2D/3D形变、过渡及渐变

本文链接：https://blog.csdn.net/Erosvan/article/details/52585357

一、2D变换

<!doctype html>
<html>
	<head>
		<meta charset="utf-8"/>
		<title>2D变换</title>
		<style type="text/css">
			div {
				width: 200px;
				height: 200px;
				background-color: red;
				margin-right: 100px;
				float: left;
			}
			.yuanshi {
				color: white;
				font-size: 50px;
			}
			.rotate {
				/*旋转*/
				transform: rotate(30deg);
			}
			.scale {
				/*缩放 : 可以给1个或2个值*/
				transform: scale(1,0.5);
			}
			.translate {
				/*位移 : 一个值 水平
						两个值 水平 竖直*/
				transform: translate(100px,500px);
			}
			.skew {
				color: white;
				font-size: 50px;
				transform: skewY(30deg);
			}
			.skew span {
				transform: skewY(-30deg);
				display: block;
			}
		</style>
	</head>
	<body>
		<div class="yuanshi">原始</div>
		<div class="rotate"></div>
		<div class="scale"></div>
		<div class="translate"></div>
		<div class="skew"><span>倾斜</span></div>
	</body>
</html>

二、3D变换

<!doctype html>
<html>
	<head>
		<meta charset="utf-8"/>
		<title>3D变换</title>
		<style type="text/css">
			/*
				过渡：某一个变化的时候会有一个过渡的时间，不会显得很突兀
				渐变：多重颜色在一起的时候，颜色与颜色之间不会有明显的分割线，会主机变化
				2D/3D变幻：元素在2D平面/3D空间的变化
			*/
			/*div {
				height: 200px;
				width: 400px;
				font-size: 40px;
				line-height: 200px;
				text-align: center;
				color: white;
				background: repeating-linear-gradient(45deg,blue 10%,red 20%);
				transition: 60s ease-in-out all;
				float: left;
				margin-right: 100PX;
				border-radius: 50%
			}*/
		/*	.rotateX:hover {
				transform: rotateX(36000000000000deg);
				transform-origin: (10px,50px);
			}
			.rotateY:hover {
				transform: rotateY(36000000000000deg);
			}
			.rotateZ:hover {
				transform: rotateZ(36000000000000deg);
			}*/
			.jingshen {
				/*景深*/
				perspective: 1200px;
			}
			.box {
				transform-style: preserve-3d;
				background-color: lightgrey;
				/*transform: rotateY(70deg); */
			}
			.reddiv {
				width: 200px;
				height: 200px;
				background-color: red;
				margin: 0 auto;
				transform-origin: center top;
				transform: rotateX(50deg);
			}
		</style>
	</head>
	<body>
		<!-- <div class="rotateX">rotateX</div>
		<div class="rotateY">rotateY</div>
		<div class="rotateZ">rotateZ</div> -->

		<div class="jingshen">
			<div class="box">
				<div class="reddiv">
					
				</div>
			</div>
		</div>
	</body>
</html>

三、过渡

<!doctype html>
<html>
	<head>
		<meta charset="utf-8"/>
		<title>过渡</title>
		<style type="text/css">
			.reddiv {
				width: 300px;
				height: 200px;
				background-color: red;
				/*过渡属性 : 给哪个属性添加过渡*/
				transition-property: all;
				/*过渡时间 : 变化的总时长*/
				transition-duration: 5s;
				/*过渡延迟 : 几秒之后执行过渡动画*/
				/*transition-delay: 1s; */
				/*变化的方式 : 快->慢，慢->快，慢->快->慢
							  out     in      in-out
							 贝塞尔曲线*/
				transition-timing-function: ease-out;
				transition-timing-function: cubic-bezier(0, 0.4, 0.58, 1);
				transition: 1s ease all;
			}
			.reddiv:hover {
				background-color: blue;
				width: 1800px;
				/*height: 700px;*/
				/*margin: 50%;*/
			}
		</style>
	</head>
	<body>
		<div class="reddiv"></div>
	</body>
</html>

四、渐变

<!doctype html>
<html>
	<head>
		<meta charset="utf-8"/>
		<title>渐变</title>
		<style type="text/css">
			div {
				width: 200px;
				height: 200px;
				margin-right: 100px;
				margin-bottom: 100px;
				float: left;
			}
			.div1 {
				background: -webkit-linear-gradient(left,red,orange,yellow,green,pink,blue,purple);
			}
			/*像素代表从左开始30px为纯蓝，从左开始100px是纯红，中间30px-100px为渐变色*/
			.div2 {
				background: -webkit-linear-gradient(left,blue 30px,red 100px);
			}
			.div3 {
				background: -webkit-linear-gradient(top,blue 20%,red 80%);
			}
			.div4 {
				background: repeating-linear-gradient(45deg,blue 10%,red 20%);
			}
			.div5 {
				background: -webkit-radial-gradient(left top,red 20%,orange 50%,gold 80%);
			}
			.div6 {
				background: repeating-radial-gradient(black 1%,grey 2%);
			}
			/*ellipse 椭圆
			  circle  圆*/
			.div7 {
				width: 350px;
				border-radius: 50%;
				background: repeating-radial-gradient(white 20%,black 99%);
			}
			.div8 {
				width: 350px;
				border-radius: 50%;
				background: repeating-radial-gradient(circle,white 2%,black 5%);
			}
		</style>
	</head>
	<body>
		<div class="div1"></div>
		<div class="div2"></div>
		<div class="div3"></div>
		<div class="div4"></div>
		<div class="div5"></div>
		<div class="div6"></div>
		<div class="div7"></div>
		<div class="div8"></div>
		<div class="div9"></div>
		<div class="div10"></div>
	</body>
</html>