카카오테크캠퍼스를 통해 CSS를 다시 처음부터 공부하고 있습니다. 덕분에 평소에 잘 모르고 사용하던 transition과 transform의 개념에 대해 더 잘 알게 되었습니다.
하지만 유독 3차원 변환 함수 자체가 많이 낯설었습니다. 2차원 변환 함수 중 하나인 translate는 여러 번 사용해 봤어도, 3차원 변환은 사용해 본 적이 없었기 때문입니다.
그래서 익숙해질 겸, 연습 겸 조금씩 두드려보다가 문득 생각나는 것이 있어서 만들어봤습니다.
★transform 개념 빠른 정리☆
transform
transform: 변환함수1 변환함수2 변환함수3 .... ;요소의 변환 효과를 줄 수 있는 CSS 속성입니다.
transform 변환 함수들
1. 2D 변환 함수
translate(x, y) 이동(x축, y축)
translateX(x) 이동(x축)
translateY(y) 이동(y축)
scale(x, y) 크기(x축, y축)
rotate(degree) 회전(각도)
skewX(x) 기울임(x축)
skewY(y) 기울임(y축)
2. 3D 변환 함수
[perspective(n) 원근법(거리), 원근법 함수는 제일 앞에 작성해야 한다.]
rotateX(x) 회전(x축)
rotateY(y) 회전(y축)
perspective
- 하위 요소를 관찰하는 원근 거리를 지정하는 속성
- 3d 변환 함수인 perspective와는 다르다.
perspective: 600px: 관찰 대상의 부모에 적용
transform: perspective(600px): 관찰 대상에 적용
행복.. 사랑.. 건강.. 만들기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./main.css">
<title>행복..사랑..건강..</title>
</head>
<body>
<div class="container">
<div class="love">사랑합니다</div>
<div class="happy">행복하세요...^__^</div>
<div class="health">건강은 <span>가장 큰</span> 선물</div>
</div>
</body>
</html>
HTML 구조는 간단합니다. 컨테이너 안에 3개의 글씨를 넣었습니다. '사랑합니다'를 rotateY 속성을 통해 빙빙 돌게 만들 생각입니다.
@keyframes rotate{
0% {
transform: rotateY(0deg);
}
25% {
transform: rotateY(90deg);
}
50% {
transform: rotateY(180deg);
}
75% {
transform: rotateY(270deg);
}
100% {
transform: rotateY(360deg);
}
}
.container{
width: 300px;
height: 300px;
border: 10px solid red;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
background: url("./image/flower.jpeg") no-repeat center / 300px 300px;
position: relative;
}
.love{
font-size: 50px;
font-weight: bold;
color: red;
animation: rotate 5s infinite linear;
-webkit-text-stroke: 2px white;
}
.happy, .health{
position: absolute;
font-size: 20px;
font-weight: 900;
color: white;
-webkit-text-stroke: 1px black;
}
.happy{
top:40px;
right: 50px;
}
.health{
bottom: 25px;
}
.health span{
font-size: 30px;
color: red
}사실 transform 속성 보다 animation 속성이 더 큰 역할을 해주는 것 같습니다. 하지만 그래도 rotateY가 없으면 결국 빙빙 돌릴 수가 없지않겠습니까?
붕어빵의 빵이 아무리 크고 맛있어 보여도 슈크림이 안 들어있으면 결국 붕어빵이 아니듯이, rotateY가 핵심입니다.
그리고 글씨에 외곽선을 넣기 위해 -webkit-text-stroke 속성을 사용했는데, 학수고대 프로젝트에서 자주 썼던 친구라 반가웠습니다.
완성
gif로 만드니까 묘한 딜레이가 생겨서 특유의 감성이 더 잘 살아났습니다. 정말 만족스럽군요
사랑하는 주변 사람들에게 보내 보는 것이 어떨까요? 하하
감사합니다.
'프로젝트' 카테고리의 다른 글
| 리액트로 카운터 버튼을 뚝딱뚝딱 만들어보자 (0) | 2023.10.16 |
|---|---|
| 🤔 (0) | 2023.10.15 |
| 개쩌는 덧셈 계산기 만들기 (0) | 2023.10.12 |