< transform 1 >
변형
엘리먼트의 크기(조절),
엘리먼트의 회전 또는 비틀기
h1이 화면 전체를 쓸 경우,
트랜스 폼 효과의 결과를 보기 어렵다.
display:inline-block;
사용
transform 효과들
1 -> 2
transform:scaleX(2)
두 배 했다는 뜻
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<h1>Hello Transform!</h1>
</body>
</html>h1 {
background-color: aqua;
/* 텍스트 사이즈 */
color: white;
display: inline-block;
padding: 5px;
/* 폰트사이즈 3배 */
font-size: 3rem;
margin: 100px;
transform: scaleX(2);
}
0.5
1/2
즉, 반으로 크기를 줄인 것
X 의미
: X축으로 변형 일어난 것
y 축 또한
효과를 준 모습
=> x축의 효과 사라짐
이유: 밑에 있는 것이
위에 있는 것을
덮어 쓰게 하기 때문에
없어짐
여러개의 트랜스폼 효과를
하나의 엘리먼트에 주고싶다면
원하는 효과를 앞에다가 붙여준다
이렇게 적용하면
X축으로 0.5 배 하면서
동시에 Y축으로도 0.5배가 적용됨
주석과 주석 아래의 코드는
동일 효과 적용 코드
참고사이트:
변형(transform) - CSS (opentutorials.org)
변형(transform) - CSS
소개 transform은 엘리먼트의 크기, 위치, 모양을 변경하는 속성입니다. 형식 transform은 아래와 같은 형식이 올 수 있습니다. /* Keyword values */ transform: none; /* Function values */ transform: matrix(1.0, 2.0, 3.0,
opentutorials.org
deg : 도를 의미
ex) 180도
translate X, Y
< transform 2 >
transform 의 단위들
rotate:
숫자가 아니라
angle 이라는 형식의
데이터 타입이 온다
angle
: 각도
1 turn = 360도
translate = 이동시키는 것
length - pixel,em,rem
percentage
Transform origin
회전할 때 중심축을 기준으로
보통은 회전을 한다.
특정 지점을 중심으로
변경되게 하는 방법
: Transform origin을 사용한다
속성 값으로 3 자리를 쓸 수 있다
첫 번째 - 100%
(= x 축의 제일 끝을 기준으로 한다는 뜻)
두 번째 - 0
세 번째 - 0
(45deg - 45도 회전한다는 의미)
첫 번째 - 0
두 번째 - 100%
(y축)
세 번째 - 0
첫 번째 - 100%
두 번째 - 0
(y축)
세 번째 - 0
첫 번째 - 0
두 번째 - 100%
(y축)
세 번째 - 0
hover 사용
h1 {
background-color: aqua;
/* 텍스트 사이즈 */
color: white;
display: inline-block;
padding: 5px;
/* 폰트사이즈 3배 */
font-size: 3rem;
margin: 100px;
}
h1:hover {
transform: scale(1.5);
}
자연스럽게 커지게 하려면
transition 사용
왼쪽 사이드에서
글씨가 커지게 만들기
transform-origin:left top;
사용
아래쪽 기준
left bottom
첫 번째 자리
: X축
끝을 기준으로 해서
화면이 커진다
아래쪽을 기준으로 해서
화면이 커짐
그 외의
transform
transform
- 2차원
- 3차원
csShake
'> 프로그래밍 언어 > CSS' 카테고리의 다른 글
| [생활코딩] CSS 수업 정리 (16) (0) | 2023.07.24 |
|---|---|
| [생활코딩] CSS 수업 정리 (15) (0) | 2023.07.24 |
| [생활코딩] CSS 수업 정리 (13) (0) | 2023.07.23 |
| [생활코딩] CSS 수업 정리 (12) (0) | 2023.07.22 |
| [생활코딩] CSS 수업 정리 (11) (0) | 2023.07.22 |
