๋ฐ์ค๋ชจ๋ธ์ด๋ normal-flow์ ์๋ ์๋ ์๋ฆฌ๊ฐ ์๋๋ฐ ๊ทธ ์๋ฆฌ์์ ํ์ , ๊ธฐ์ธ์ด๊ธฐ, ์์ง์ด๊ธฐ ๊ฐ๋ฅ !
๋ณํ์ ์ค๋ฅธ์ชฝ์์๋ถํฐ ์ผ์ชฝ์ผ๋ก ํ๋์ฉ ์์๋๋ก ์ ์ฉ
transform : rotate(10deg) translateY(5px)
โ translateY ๋จผ์ ์ ์ฉ, rotate ๋ค์์ผ๋ก ์ ์ฉ์ด ๋๋ค.
transform : scale(sx);
transform : scale(sx,sy);
scale(0.5)
๋ผ๊ณ ํ๋ฉด ๊ฐ๋ก๋ 50%, ์ธ๋ก๋ 50% ์ค์ด๋ ๋ค.
๊ฐ๋ฐ์ ๋๊ตฌ์์๋ img ์ฌ์ด์ฆ๋ width, height๋ ๊ทธ๋๋ก๋ค.
scale์ ๊ทธ์ ๋์ ๋ณด์ฌ์ฃผ๊ธฐ ์ํจ์ด๋ค.
<angle> ์ ์ฌ์ค ์๋ฃํ์ด๋ค.
deg : degree๋ฅผ ์๋ฏธํ๋ค.
45deg
โ 45๋๋ฅผ ์๋ฏธํ๋ค.
turn : ๋ฐํด๋ฅผ ์๋ฏธํ๋ค.
- 2turn โ 2๋ฐํด ๋๋ฆฐ ๊ฒ์ ์๋ฏธํ๋ค.
90deg = 0.25turn (1/4๋งํผ ๋๋ฆฐ ๊ฒ์ด๋๊น)
transform:translate(sx);
transform:translate(sx,sy);
scale๊ณผ ๋ง์ฐฌ๊ฐ์ง๋ก x์ถ, y์ถ ์ด๋์ด ๊ฐ๋ฅํ๋ค.
ํ๊ฐ์ง๋ง ์ ๋ ฅํ๋ค๊ณ ํด์ x์ถ 200px, y์ถ 200px ์์ง์ด๋ ๊ฒ์ด ์๋๋ผ (200px,0) ์ด๋ผ๊ณ ์๊ฐํ๋ฉด ๋๋ค.
transform:skew(sx);
transform:skew(sx,sy);
๊ฐ์ ํ๋๋ง ์ด ๊ฒ์ skew(x,0); ์ ํ ๊ฒ๊ณผ ๋์ผํ๋ค.
๋๊ฐ๋ฅผ ๋ชจ๋ ์ด๊ฒ์ x์ถ์ผ๋ก sx๋งํผ ๊ธฐ์ธ์ด๊ณ , y์ถ์ผ๋ก sy๋งํผ ๊ธฐ์ธ์ธ ๊ฒ์ด๋ค.
transform-origin:top left;
์๊ฐ์ฐจ๋ฅผ ํตํด ๋ถ๋๋ฝ๊ฒ ๋ณ๊ฒฝ๋๋ค. (์๊ฐ์ด๋ผ๋ ๊ฐ๋ ์ด ์ถ๊ฐ๋๋ค.)
transition-property : none ;
์๋ฌด๋ฐ ๋ณ๊ฒฝํ์ง ์๊ฒ ๋ค๋ ์๋ฏธ
transition-property : all;
๋ชจ๋ property ๋ฅผ ๋ณ๊ฒฝํ๊ฒ ๋ค.
transition-property : margin-right;
margin right๋ฅผ ๋ณ๊ฒฝํ๊ฒ ๋ค.
: ์ผ๋ง๋งํผ์ ์๊ฐ์ด ์ง๋๊ณ ๋ฐ๋ ๊ฒ์ธ์ง
transition-duration : 500ms; transition-property : margin-right;
margin-right์ ํจ๊ณผ๋ฅผ 500ms์ ์๊ฐ์ ๊ฐ์ง๊ณ ๋ณ๊ฒฝํ๊ฒ ๋ค๋ ์๋ฏธ๋ค.
transition-duration : 500ms, 600ms; transition-property : margin-right, color;
margin right๋ 500ms , color๋ 600ms ๊ฑธ๋ฆฐ๋ค๋ ์๋ฏธ๋ค.
Unit :1s=1000ms
.box{
width:300px;
height:80px;
border: 2px dashed teal;
background-color:darkslategray;
font-size:50px;
color:white;
transition-property: all;
/*๋ชจ๋ property๋ฅผ ๋ณ๊ฒฝํ๊ฒ ๋ค๋ ์๋ฏธ*/
transition-duration: 2s;
}
.box:hover{
width:340px;
background-color:indianred;
font-size:60px;
}
๋ง์ฝ transition-property์ transition-duration์ .box:hover
์ ๋ฃ๋๋ค๋ฉด ๋ง์ฐ์ค ๋ ๋ ํจ๊ณผ๊ฐ ์ ์ฉ๋์ง ์๋๋ค. (ex . ๋ง์ฐ์ค๋ผ๊ณ 2์ด๋ค ์๋๋๋ก ๋ณ๊ฒฝ๋๋ ํจ๊ณผ ์ ์ฉ X)
transition-delay ์์๊ฐ ์ฌ๋ฌ ๊ฐ์ผ๋, ์์๊ฐ ๋๋ฏธ๋ ธ์ฒ๋ผ ๋ณํ๋ ํจ๊ณผ๋ฅผ ์ค ์ ์๋ค.
A์์ B์ํ๋ก ๋ณํ๋๊ฒ ์ค๊ฐ๊ณผ์ ์ด ์กด์ฌํ๋ค.
ex) ๋นจ๊ฐ์ -> ํ๋์์ผ๋ก ๋ณํ๋ค๋ฉด ์ค๊ฐ๊ณผ์ ์ ๋ณด๋ผ์์ด ๋ ์ ์๋ค.
transition-timing-function : ease;
transition-timing-funtion : linear
: ๋ณํ๋ ์๋๊ฐ ์ ํ์ ์ด๊ฒ ์ผ๊ด์ ์ผ๋ก ๋ณํ๋ค.
dynamicํ ํจ๊ณผ๋ฅผ ์ค ์ ์๋ค.
. box{
...
...
transition-property: all;
transition-duration : 3s;
transition-delay: 1s;
transition-timing-funtion: ease-in-out;
์ผ๋ก ์ธ ์ ๋ ์์ง๋ง,
. box{
...
...
transition: all 3s ease-in-out 1s;
๋ก ํ ์ค์ ์ธ ์๋ ์๋ค.
๋งจ ์์๋ transition-property๋ฅผ ๊ฐ์ฅ ๋จผ์ ์ด๋ค !
.hover-ex{
width:500px;
height:300px;
background-color: darkolivegreen;
border-radius: 30px;
transition: all 2s ease-in-out;
}
.hover-ex:hover{
transform:rotate(360deg);
}