<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ํธ๋์ง์
(์ค์)</title>
</head>
<style>
div {
width: 300px;
height: 300px;
background-color: #ffd6de;
/*
px ๋จ์ % ๋จ์๋ฅผ ์ฌ์ฉํ ์ ์๋๋ฐ, %๊ฐ์ ๋ณธ ์์์ ํฌ๊ธฐ๋ฅผ ๊ธฐ์ค์ผ๋ก ํจ
translate(x, y): ๊ฐ๋ก๋ฐฉํฅ x, ์ธ๋ก๋ฐฉํฅ y๋งํผ ์ด๋
translateX: ๊ฐ๋ก๋ฐฉํฅ์ผ๋ก๋ง x๋งํผ
translateY: ์ธ๋ก๋ฐฉํฅ์ผ๋ก๋ง y๋งํผ
scale(x): x๋งํผ ํ๋/์ถ์ ํจ ์๋ ํฌ๊ธฐ ๊ธฐ์ค์ผ๋ก 0%~?%๊น์ง ๊ฐ๋ฅ
rotate(deg): deg๋จ์๋ก ์์๋ฅผ ํ์ ์ํด. ์์๋ ์๊ณ, ์์๋ ๋ฐ์๊ณ๋ฐฉํฅ
*/
position: relative;
top: 200px;
left: 200px;
border-width: 10px;
border-style: solid;
border-top-color: red;
border-right-color: purple;
border-bottom-color: blue;
border-left-color: orange;
/*transform: translateX(10px) rotate(45deg);
!์์ ์ค์! ์์ ๋ฐ๋๋ฉด ์์น๋ ๋ฐ๋ => ์ถ์ ๋ฐฉํฅ์ด ํ์ ํด์ ์ถ๊ธฐ์ค์ผ๋ก ์ด๋ํ๊ธฐ ๋๋ฌธ */
transition-duration: 1s; /* ๋ณ๊ฒฝ์ด ์ผ๋ง๋์ ์ด๋ฃจ์ด์ง ๊ฒ์ด๋ */
transition-property: all; /* ๊ธฐ๋ณธ๊ฐ: all, ์ด๋ค ์์ฑ์ transition ์ ์ฉ์ํฌ ๊ฒ์ด๋*/
/*transition-delay: 1s; !* ์ผ๋ง ๊ธฐ๋ค๋ฆฌ๊ณ ์ ์ฉ ๋ ๊ฒ์ด๋ *!*/
transition-timing-function: cubic-bezier(1, 0.08, 0.06, 0.57);
/* cubic-bezier: 4๊ฐ์ ๊ฐ ์ค์ ํ๊ธฐ(์น์์ f12๋๋ฌ์ ๊ณก์ ๊ทธ๋ํ๋ก ํ์ธํ ์ ์์ */
}
#d0:hover{
transform: translateX(1000px) rotate(45deg);
}
#d1:hover{
background-color: black;
transform: scale(200%) rotate(45deg);
}
#d2:hover{
transform: rotateX(50deg);
perspective: 300px; /* ์๊ทผ๊ฐ ์ถ๊ฐ */
}
#d3:hover{
transform: skew(30deg, -15deg); /* ์ถ ๊ธฐ์ค 30๋ ๋นํ๊ธฐ */
}
</style>
<body>
<div id="d0"></div>
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
</body>
</html>
