프론트엔드 3일차 CSS(그라데이션 예제, transform 속성, transition예제)
2024. 1. 15. 17:11ㆍ프론트엔드
1. 그라데이션 예제
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>그라데이션 예제</title>
</head>
<style>
.box{
height: 500px; border: 5px solid black;width: 500px;
}
.linear-gradient{background: radial-gradient(45deg, right, red, #0f0 50%, blue);}
.radial-gradient1{background: radial-gradient(red 10%, blue);}
.radial-gradient2{background:radial-gradient(#f00 10%, #00f);}
.radial-gradient3{width: 1000px; background: radial-gradient(circle, #f00, #00f);}
.radial-gradient4{background:radial-gradient(farthest-side at 30% 20%, yellow, );}
.radial-gradient5{background:radial-gradient(farthest-side at 30% 20%, yellow);}
</style>
<body>
<div class="box linear-gradient"></div>
<div class="box radial-gradient1"></div>
<div class="box radial-gradient2"></div>
<div class="box radial-gradient3"></div>
<div class="box radial-gradient4"></div>
<div class="box radial-gradient5"></div>
</body>
</html>2. transform속성
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*
transform
- 다양한 함수들을 이용하여 요소를 변형시키는 속성
- 함수
- translate??? : 요소를 이동
- scale??? : 요소를 비율에 맞춰 크기를 변경
- rotate??? : 요소를 기준에 맞게 회전. 실제 요소 크기와 모양이 변경되지 않음
- skew??? : 요소를 비틀어 모양을 변형
perspective
- 3d 변환을 적용할 때 원근 효과를 조절할 때 사용하는 속성.
- 값이 클수록 더 멀리 있는 것 처럼 보임, 작을수록 가까이 있는 것 처럼 보임.
perspective-origin
- 3D 원근에 대한 시점을 조절
- x축, y축 위치를 지정, 기본은 50%, 50%으로 중심을 의미
transform-origin
- transform 속성을 이용하여 요소를 변형할 때 기준점을 설정하는 속성
transform-style
- 부모 요소에 적용한 변형을 하위 요소에 적용하는 속성
- flat : 하위 요소를 평면으로 처리
- perserve-3D : 하위 요소들에 3D 효과를 적용
backface-visibility
- 회전하여 뒷면이 보일 경우 보이게 할건지 말건지를 설정하는 속성
*/
.container{
height: 200px; width: 500px; border: 1px solid black;
/* perspective : z축 변형작업 할 때 반드시 필요한 속성임. */
/* perspective: 300px; perspective-origin: 50% 50%; */
}
.box{ background-color: red; width: 500px; height: 50px;}
.translate .box1{ transform: translate(100px, 100px); }
.translate .box2{ transform: translateX(50%);}
.translate .box3{ transform: translateZ(100px);}
.scale .box{ background: gray;}
.scale .box1{ transform: scale(2, 3); transform-origin: 0 0;}
.scale .box2{ transform: scaleX(2); transform-origin: 0 0;}
.rotate .box{ background: pink;}
.rotate .box1{ transform: rotateX(45deg); transform-origin: 0 0;}
.rotate .box2{ transform: rotateY(45deg); transform-origin: 0 0;}
.rotate .box3{ transform: rotateZ(45deg); transform-origin: 0 0;}
.skew .box{ background: blue;}
.skew .box1{ transform: skewX(30deg);}
.skew .box2{ transform: skewY(30deg);}
.skew .box3{ transform: skew(30deg, 30deg);}
.backface .box{
background: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRQ5_ABOTsZYJ05YKUW333-K12fCMGqwhPi8Q&usqp=CAU);
background-size: 200px 200px;
}
.backface .box1{
transform: rotateY(135deg); transform-origin: 100px 0;
width: 200px; height: 200px; backface-visibility: hidden;
}
.container .style{
perspective: 800px;
}
.style .box{
width: 100px; height: 100px;
background-color: red; margin: 0 auto;
transform: rotate(45deg) translateZ(50px);
transform-style: flat; transition: transform 1s;
}
.style .box:hover{ transform: rotateY(180deg)}
.style .box:hover span{ transform: rotateZ(180deg); transition: transform 6s;}
.sttyle .box1{
transform-style: flat;
}
.style .box2{
transform-style: preserve-3d;
}
</style>
</head>
<body>
<div class="container translate">
<div class="box box1"></div>
</div>
<div class="container translate">
<div class="box box2"></div>
</div>
<div class="container translate">
<div class="box box3"></div>
</div>
<div class="container scale">
<div class="box box1"></div>
</div>
<div class="container scale">
<div class="box box2"></div>
</div>
<div class="container rotate">
<div class="box box1"></div>
</div>
<div class="container rotate">
<div class="box box2"></div>
</div>
<div class="container rotate">
<div class="box box3"></div>
</div>
<div class="container skew">
<div class="box box1"></div>
</div>
<div class="container skew">
<div class="box box2"></div>
</div>
<div class="container skew">
<div class="box box3"></div>
</div>
<div class="container backface">
<div class="box box1"></div>
</div>
<div class="container style">
<div class="box box1"></div>
</div>
<div class="container style">
<div class="box box2">
<span>Text</span>
</div>
</div>
</body>
</html>3. transition예제
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>transition 속성</title>
<style>
.box{
width: 100px; height: 100px; text-align: center;
border: 1px solid black;
line-height: 100px;
}
.box:hover{
font-size: 50px; font-weight: bold; transition: font-size 2s, transform 2s;
transform: rotateY(45deg);
background-color: red;
}
</style>
</head>
<body>
<div class="box">
꽝
</div>
</body>
</html>'프론트엔드' 카테고리의 다른 글
| 프론트엔드 CSS 4일차(검색창, bar, 배경 반투명, 서브메뉴, viewport, 반응형) (0) | 2024.01.18 |
|---|---|
| 프론트엔드 4일차 CSS(애니메이션 속성, opacity, overflow, 회원가입, 구조) (0) | 2024.01.18 |
| 프론트엔드 3일차 CSS(메뉴 예제, background속성, 다단 예제, 테이블 관련 속성, 텍스트 수직 정렬, 테이블 관련 속성, 테이블 예제) (1) | 2024.01.15 |
| 프론트엔드 2일차 CSS(테두리 관련 속성, 박스 그림자, 여백, position, visivility, z-index, float) (1) | 2024.01.15 |
| 프론트엔드 2일차 CSS(문단 관련 속성, 말줄임, 목록 관련 속성, 크기 속성, display) (1) | 2024.01.15 |