<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Transform</title>
<style>
div {
margin: 100px;
width: 150px;
height: 150px;
border: 1px solid #000;
float: left;
}
p {
height: 100%;
background: #f00;
opacity: 0.5;
margin: 0px;
}
div:nth-child(1) p {
transform: translateX(50px);
}
div:nth-child(2) p {
transform: translateY(100px);
}
div:nth-child(3) p {
transform: translate(30px ,80px);
}
div:nth-child(4) p {
transform: skewX(-20deg); /* 각도, degree */
}
div:nth-child(5) p {
transform: skewY(20deg);
}
div:nth-child(6) p {
transform: skew(10deg, 30deg);
}
div:nth-child(7) p {
transform: scaleX(2); /* 값을 배수로 */
}
div:nth-child(8) p {
transform: scaleY(0.5);
}
div:nth-child(9) p {
transform: scale(1.5, 0.7);
}
div:nth-child(10) p {
transform: rotate(45deg);
}
div:nth-child(11) p {
transform: rotate(45deg);
transform-origin: right bottom;
}
</style>
</head>
<body>
<div>
<p></p>
</div>
<div>
<p></p>
</div>
<div>
<p></p>
</div>
<div>
<p></p>
</div>
<div>
<p></p>
</div>
<div>
<p></p>
</div>
<div>
<p></p>
</div>
<div>
<p></p>
</div>
<div>
<p></p>
</div>
<div>
<p></p>
</div>
<div>
<p></p>
</div>
</body>
</html>
Engineering is the closest thing to magic that exists in the world.