[CSS] 24. transform

in Web on CSS


transform



<!-----------------transfrom.html ------------------------>

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>transform</title>
	<link rel="stylesheet" href="reset.css">
	<style>
		body{
			font-family:Verdana,sans-serif;
			display:flex;
			flex-wrap:wrap;
		}
		.box{
			position: relative;
			border: 1px solid #333;
			width:150px; 
			height:150px;
			background: #ddd;
			margin:50px;
		}
		span{
			position: absolute;
			width:100%;
			height:100%;
			background: rgba(255,255,0,.5);
			transition:all 2s;
			cursor:pointer;
			font-size:20px;
			text-align:center;
			line-height:150px;
		}
		.box:nth-child(1) span:hover{
			transform:translateX(75px); //x축으로 75px만큼 이동
		}	
		.box:nth-child(2) span:hover{
			transform:translateY(75px); //y축으로 75px만큼 이동
		}
		.box:nth-child(3) span:hover{
			transform:translate(50px,50px); //xy축으로 50px만큼 이동
		}
		.box:nth-child(4) span:hover{
			transform:rotate(180deg); //180도 회전
		}
		.box:nth-child(5){
			perspective:80px; // 원근감을 준다.
		}
		.box:nth-child(5) span:hover{
			transform:rotateX(180deg); //3차원 x축으로 180도 회전
		}
		.box:nth-child(6){
			perspective:800px; 
		}
		.box:nth-child(6) span:hover{
			transform:rotateY(180deg); //3차원 y축으로 180도 회전
		}
		.box:nth-child(7) span{
			transform-origin: left center; //중심축을 정함
		}
		.box:nth-child(7) span:hover{
			transform:rotateY(180deg); //3차원 y축으로 180도 기준이 왼쪽 센터
		}
		.box:nth-child(8) span:hover{
			transform:skewX(45deg); //X축 방향으로 비틀음
		}
		.box:nth-child(9) span:hover{
			transform:skewY(45deg); 
		}
		.box:nth-child(10) span:hover{
			transform:scale(2);  //커지게함
		}
		.box:nth-child(11) span:hover{
			transform: perspective(800px) translateZ(300px);
		}
		/*---------------------------------------------------------------------------*/
		
		.box2{	
			width: 200px;
			height:200px;
			position:relative;
			margin:200px auto;
			perspective:800px;
			top:200px;
			left:100px;
		}
		.box2 div{
			position:absolute;
			width:100%;
			height:100%;
			background: rgba(255,0,0,.5);
			top:0;
			left:0;
		}
		.right{
			transition:all .5s linear; /*linear 시작과 끝을 같게함*/
			transform-origin:right center;
		}
		.left{
			transition:all .5s .3s linear;
			transform-origin:left center;
		}
		.bottom{
			transition:all .5s .6s linear;
			transform-origin:bottom center;
		}
		.top{
			transition:all .5s .9s linear;
			transform-origin:top center;
		}
		.box2:hover .right{
			transform:rotateY(180deg)
		}
		.box2:hover .left{
			transform:rotateY(-180deg)
		}
		.box2:hover .bottom{
			transform:rotateX(-180deg)
		}
		.box2:hover .top{
			transform:rotateX(180deg)
		}
	</style>
</head>
<body>
	<div class="box">
		<span>translateX</span>
	</div>
	<div class="box">
		<span>translateY</span>
	</div>
	<div class="box">
		<span>translate</span>
	</div>
	<div class="box">
		<span>rotate</span>
	</div>
	<div class="box">
		<span>rotateX</span>
	</div>
	<div class="box">
		<span>rotateY</span>
	</div>
	<div class="box">
		<span>origin</span>
	</div>
	<div class="box">
		<span>skewX</span>
	</div>
	<div class="box">
		<span>skewY</span>
	</div>
	<div class="box">
		<span>scale</span>
	</div>
	<div class="box">
		<span>translateZ</span>
	</div>
	<div class="box2">
		<div class="right">
			<span>동</span>
		</div>
		<div class="left">
			<span>서</span>
		</div>
		<div class="bottom">
			<span>남</span>
		</div>
		<div class="top">
			<span>북</span>
		</div>
	</div>
</body>
</html>




실행결과