-
[Module #4] CSS (#4-3)노마드코더/html+css (카카오클론-초급) 2020. 4. 3. 14:28
#4-3 . Transformations
Transformations는 html문서의 element들을 변경, 모습이 변하는 효과를 뜻한다.
구조는,
transform: properties(value);
Properties
- backface-visibility
- perspective
- perspective-origin
- rotate
- scale
- transform
- transform-box
- transform-origin
- transform-style
- translate
Data types
The transform-function CSS data type represents a transformation that affects an element's appearance. Transformation functions can rotate, resize, distort, or move an element in 2D or 3D space. It is used in the transform property.
developer.mozilla.org
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Transformations</title> <style> .box { height: 200px; width: 200px; background-color: aquamarine; transform: rotate(20deg); } </style> </head> <body> <div class="box"></div> </body> </html>이러면, 20도 각도로 돌아간 사각형이 보여진다.
https://developer.mozilla.org/en-US/docs/Web/CSS/transform
transform
The transform CSS property lets you rotate, scale, skew, or translate an element. It modifies the coordinate space of the CSS visual formatting model.
developer.mozilla.org
연습할 수 있는 properties.
재밌는건 , 이걸 트랜지션이랑 합쳤을 때! 이다
이렇게 추가하면, hover했을때, 네모 박스가 20도 돌아가게 된당!
거기에 transition까지 넣어주면!
transition이 들어간 transform이 완성!
**transform: scale(.5, .5) 하면 크기가 반으로 줄어듦!
'노마드코더 > html+css (카카오클론-초급)' 카테고리의 다른 글
#1.2 ES5, ES6 ES?! and JS (0) 2020.04.20 카카오톡-클론코딩과정 (0) 2020.04.07 #4-4 Animations (0) 2020.04.04 [Module #4] CSS (#4-2) (0) 2020.04.03