π»Transformπ»
- μμΉ, λ°°μ¨, νμ , μ곑νλ€.
- μ£Όλ‘ μ λλ©μ΄μ ν¨κ³Όλ₯Ό λ§λ€κ±°λ μμμ μνλ₯Ό λμ μΌλ‘ λ³κ²½νκΈ° μν΄ μ¬μ©λλ€.
- λ³ν ν¨μλ₯Ό μ¬μ©νμ¬ μμλ₯Ό μ‘°μνλ€.
- μ£Όλ‘ 1~3λ²μ λ§μ΄ μ¬μ©νλ€.
1. translate(x, y) : μμΉ λ³ν(μ΄λ)
2. scale(x, y) : λ°°μ¨ λ³ν(νλ/μΆμ)
3. rotate(angle) : νμ λ³ν
4. skew(x, y) : μ곑(λΉνκΈ°)
5. matrix(a, b, c, d, e, f) : μ¬μ©μ μ μν(1~4λ²) / a, b, c, d, e, fλ νλ ¬μ κ°μ λνλ΄λ©°, κ°κ°μ κ°μ μμλ₯Ό λ³ννλ λ° μ¬μ©λλ€.
1. translate
- μμλ₯Ό μ§μ λ xμ y μ’νλ§νΌ μ΄λμν¨λ€.
- xμ yλ ν½μ (px)μ΄λ λ°±λΆμ¨(%) λ±μ λ¨μλ‘ μ§μ ν μ μμ΅λλ€.
- μλ₯Ό λ€μ΄, transform: translate(50px, 50px);λ μμλ₯Ό μ€λ₯Έμͺ½μΌλ‘ 50px, μλλ‘ 50px μ΄λμν΅λλ€.
body {margin-bottom: 500px;}
.box {
border: 1px solid black;
width: 200px;
height: 200px;
margin: 30px;
}
#box1{
background-color: tomato;
transform: translate(100px, 100px);
}
#box2{
background-color: gold;
}
#box3 {
background-color: cornflowerblue;
}
2. scale
- μμμ ν¬κΈ°λ₯Ό μ‘°μ νλ€.
- xμ yλ κ°λ‘μ μΈλ‘μ λ°°μ¨μ λνλ΄λλ°, νλμ κ°λ§ μ¬μ©νλ©΄ κ°λ‘μ μΈλ‘μ ν¬κΈ°κ° λμΌνκ² μ‘°μ λλ€.
- μλ₯Ό λ€μ΄) transform: scale(1.5);λ μμλ₯Ό κ°λ‘μ μΈλ‘ λ°©ν₯μΌλ‘ 1.5λ°° νλνλ€.
νλλ₯Ό ν΄μ κΈμλ κ°μ΄ λμ΄λ¬λ€.
body {margin-bottom: 500px;}
.box {
border: 1px solid black;
width: 200px;
height: 200px;
margin: 30px;
}
#box1{
background-color: tomato;
transform: scale(1.2, 1);
}
#box2{
background-color: gold;
}
#box3 {
background-color: cornflowerblue;
}
3. rotate()
- μμλ₯Ό μ§μ λ κ°λλ§νΌ νμ μν¨λ€.
- angleμ κ°λλ₯Ό λνλ΄λ©°, deg λ¨μλ₯Ό μ¬μ©νλ€.
- μμλ μκ³ λ°©ν₯μΌλ‘ νμ νκ³ , μμλ λ°μκ³ λ°©ν₯μΌλ‘ νμ νλ€.
- μλ₯Ό λ€μ΄) transform: rotate(180deg);λ μμλ₯Ό μκ³ λ°©ν₯μΌλ‘ 180λ νμ μν¨λ€.
body {margin-bottom: 500px;}
.box {
border: 1px solid black;
width: 200px;
height: 200px;
margin: 30px;
}
#box1{
background-color: tomato;
transform: rotate(180deg);
}
#box2{
background-color: gold;
}
#box3 {
background-color: cornflowerblue;
}
4. skew
- μμλ₯Ό μ§μ λ κ°λλ§νΌ κΈ°μΈμΈλ€.
- xμ yλ xμΆκ³Ό yμΆ λ°©ν₯μΌλ‘μ κΈ°μΈκΈ°λ₯Ό λνλΈλ€.
body {margin-bottom: 500px;}
.box {
border: 1px solid black;
width: 200px;
height: 200px;
margin: 30px;
}
#box1{
background-color: tomato;
transform: skew(10deg, 0deg);
}
#box2{
background-color: gold;
}
#box3 {
background-color: cornflowerblue;
}
π»μ€μ¬ μΆ λ³κ²½νκΈ°π»
- transform-origin
- μμμ λ³ν(transform)μ κΈ°μ€μ μ μ μν©λλ€.
- μμμ μ΄λ λΆλΆμ κΈ°μ€μΌλ‘ λ³νν μ§λ₯Ό κ²°μ ν μ μμ΅λλ€.
- κΈ°λ³Έμ μΌλ‘ transform-originμ κ°μ 50% 50% 0μ΄λ©°, μ΄λ μμμ μ€μμ κΈ°μ€μΌλ‘ λ³νλλ€.
π»λμ μΌλ‘ λ§λ€κΈ°π»
- λ§μ°μ€ μλ‘ μ¬λ Έμ λ μ΄λ―Έμ§ νλνκΈ°
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/ex43.css">
</head>
<body>
<h1>κ³ μμ΄</h1>
<div id="cat">
<img src="../asset/images/catty01.png">
<img src="../asset/images/catty02.png">
<img src="../asset/images/catty03.png">
<img src="../asset/images/catty04.png">
<img src="../asset/images/catty05.png">
</div>
</body>
</html>
#cat > img:hover {
transform: scale(1.2);
}
π»μ νλ λ©λ΄ λ§λ€μ΄λ³΄κΈ°π»
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/ex44.css">
</head>
<body>
<nav id="main-menu">
<img src="../asset/images/rect_icon01.png">
<img src="../asset/images/rect_icon02.png">
<img src="../asset/images/rect_icon03.png">
<img src="../asset/images/rect_icon04.png">
<img src="../asset/images/rect_icon05.png">
</nav>
<nav id="side-menu">
<img src="../asset/images/rect_icon01.png">
<img src="../asset/images/rect_icon02.png">
<img src="../asset/images/rect_icon03.png">
<img src="../asset/images/rect_icon04.png">
<img src="../asset/images/rect_icon05.png">
</nav>
<nav id="footer-menu">
<img src="../asset/images/rect_icon01.png">
<img src="../asset/images/rect_icon02.png">
<img src="../asset/images/rect_icon03.png">
<img src="../asset/images/rect_icon04.png">
<img src="../asset/images/rect_icon05.png">
</nav>
</body>
</html>
#main-menu {
border: 1px solid black;
font-size: 0;
width: 630px;
margin: 0 auto;
transform: translate(0px, -100px);
}
#main-menu > img:hover{
transform: translate(0px, 90px);
}
#side-menu {
border: 0px solid black;
font-size: 0;
width: 126px;
transform: translate(-105px, 0px);
}
#side-menu > img:hover{
transform: translate(90px, 0px);
}
#footer-menu {
position: fixed;
bottom: 0;
left: 0;
right: 0;
border: 0px solid black;
font-size: 0;
width: 630px;
margin: 0 auto;
transform: translate(0px, 100px);
}
#footer-menu > img:hover{
transform: translate(0px, -90px);
}
'WEB > CSS' μΉ΄ν κ³ λ¦¬μ λ€λ₯Έ κΈ
| [CSS] μ λλ©μ΄μ ν¨κ³Ό : Transition, μ ν (0) | 2023.09.27 |
|---|---|
| <div>, <nav> μ°¨μ΄μ (0) | 2023.09.27 |
| [CSS]νμ΄μ§ ν¬κΈ° μ‘°μ μ, μμλ€μ΄ μλ κ°ν λ λ (0) | 2023.09.27 |
| [CSS] CSS Layout : λ€λ¨ ꡬ쑰 (0) | 2023.09.27 |
| [CSS] outline (0) | 2023.09.27 |
