2023.12.02
🥑 transform
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ex03.html</title>
<style>
body {
background-color: #eeeeee;
}
div.container {
margin-left: 10px;
display: inline-block;
text-align: center;
width: 200px;
height: 200px;
background-color: white;
box-shadow: 10px 10px 10px #ccc;
/* box-shadow: 박스에 그림자지게 하는 스타일 */
}
.container div {
transition-duration: 0.5s;
width: 100px;
height: 100px;
background-color: salmon;
position: relative;
top: 50px;
left: 50px;
}
p {
font-size: 14px;
margin-top: 60px;
}
div.scale:active {
transform: scale(2);
}
div.rotate:active {
transform: rotate(45deg);
}
div.skew:active {
transform: skew(45deg, 45deg);
}
div.translate:active {
transform: translate(45px, 45px);
}
div.rotateX:active {
transform: perspective(100px)
rotateX(45deg);
}
div.rotateY:active {
transform: perspective(100px)
rotateY(45deg);
}
div.origin1:active {
transform-origin: 100% 0 0;
transform: rotate(45deg);
}
div.origin2:active {
transform-origin: bottom left;
transform: rotate(45deg);
}
</style>
</head>
<body>
<h1>transform</h1>
<hr>
<div class="container">
<div class="scale"></div>
<p>scale(2)</p>
</div>
<div class="container">
<div class="rotate"></div>
<p>rotate(45)</p>
</div>
<div class="container">
<div class="skew"></div>
<p>skew(45deg, 45deg)</p>
</div>
<div class="container">
<div class="translate"></div>
<p>translate(45px, 45px)</p>
</div>
<p align="center">
perspective: 원근감
</p>
<br>
<div class="container">
<div class="rotateX"></div>
<p>rotateX(45deg)</p>
</div>
<div class="container">
<div class="rotateY"></div>
<p>rotateY(45deg)</p>
</div>
<p align="center">
transform-origin : 기준점
</p>
<br>
<div class="container">
<div class="origin1"></div>
<p>trnsform-origin: 100% 0 0</p>
</div>
<div class="container">
<div class="origin2"></div>
<p>trnsform-origin: bottom left</p>
</div>
</body>
</html>🔥 한줄평
html에서 배웠던 내용 중에서 가장 재미있었고 만들어진 디자인이 세련되어 보였다!!
기초부터 시작하는 감쟈 ※ 소개글 확인해주세요!! ※