1. 程式人生 > >CSS3(2D變換)

CSS3(2D變換)

一.2D變換

1.旋轉transform:rotate
例:

<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.wrap{
				width: 400px;
				height: 400px;
				background: pink;
				/*padding: 100px 0px 0px 100px;*/
				text-align: center;
				/*line-height: 400px;*/
				transition: all 5s;
				margin: 100px auto;
			}
			.div_01{
				margin-top: 100px;
				display: inline-block;
				width: 200px;
				height: 200px;
				background: orange;
				transition: all 3s;
			}
			.wrap:hover{
				/*transform: rotateX(); 表示X軸的旋轉*/
				/*transform: rotateY(); 表示Y軸的旋轉*/
				transform: rotate(45deg);	
			}
			.wrap:hover .div_01{
				transform: rotate(360deg);
			}
		</style>
	</head>
	<body>
		<div class="wrap">
			<div class="div_01"></div>
		</div>
	</body>
</html>

2.位移transform:translate(水平,垂直)
例:

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		     body{
		     	margin: 0px;
		     	padding: 0px;
		     	background: antiquewhite;
		     	transition: all 10s;
		     }
			.div1{
				width: 200px;
				height: 200px;
				background-color: white;
				
			}
			.div1:hover{
				background: aqua;
				opacity: 0.3;
				border-radius: 50%;
				transform: translateX(700px) rotate(360deg) scale(2) skew(360deg);
			}
		</style>
	</head>
	<body>
		<div class="div1"></div>
	</body>
</html>

3.扭曲transform:skew()值為度數,skewX(水平方向),skewY(垂直方向)
例:

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.div1{
				width: 400px;
				height: 400px;
				background-color: darkmagenta;
				margin: 200px auto;
				transition: all 5s;
			}
			.div1:hover{
				transform: skew(12138deg);
			}
		</style>
	</head>
	<body>
		<div class="div1"></div>
	</body>
</html>

4.縮放transform:scale()值代表倍數,scaleX水平縮放,scaleY垂直縮放
例;

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.div1{
				width: 300px;
				height: 300px;
				background: aqua;
				transition: all 1s;
			}
			.div1:hover{
				transform: scaleX(2);
				/*transform: scaleY(3);*/
			}
		</style>
	</head>
	<body>
		<div class="div1"></div>
	</body>
</html>