반응형
1. transform 박스모델 변형 관련 스타일 속성
- 속성값 : 변형 관련 함수 - translate(), scale(), rotate() , skew() 등
1) translate() - 이동 함수
36_transform_translate.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS</title>
<style type="text/css">
img{border: 1px solid black;}
.image{
float: left;
margin: 20px;
background: rgba(0,0,255,0.3);
/* 😝 perspective : Z 영역 관련 스타일 속성 */
/* 속성값 : Z 영역에 대한 깊이를 px 단위로 설정 */
perspective: 200px; /* 평면 브라우저에 z 영역이 만들어짐 */
/* 😝 transform-style : 박스모델 차원 관련 스타일 속성 */
/* 속성값 : float(기본 - 2차원), preserve-3d (3차원) */
transform-style: preserve-3d;
}
/* 😝 translate(x,y) : 박스모델을 가로(X)와 세로(Y) 방향으로 이동하는 함수 - 단위 : px */
#translate img{
transform: translate(20px, 20px); /*오:20px 아래:20px*/
}
/* 😝 translateX(x) : 박스모델을 가로(X) 방향으로 이동하는 함수 - 단위 : px */
#translatex img{
transform: translateX(20px); /* 오:20px */
}
/* 😝 translateY(y) : 박스모델을 세로(Y) 방향으로 이동하는 함수 - 단위 : px */
#translatey img{
transform: translateY(-20px); /* 위:20px */
}
/* 😝 translateZ(z) : 박스모델을 원근(Z) 방향으로 이동하는 함수 - 단위 : px */
#translatez img{
transform: translateZ(-20px); /* 뒤:20px */
}
/* 😝 translate3d(x,y,z) : 박스모델을 입체적으로 이동하는 함수 - 단위 : px */
#translate3d img{
transform: translate3d(-20px,-20px,-20px); /* 왼:20px, 위:20px, 뒤:20px */
}
</style>
</head>
<body>
<h1>박스모델 변형 관련 스타일 속성</h1>
<hr>
<div id="original">
<h3>원본이미지</h3>
<img alt="펜션 이미지" src="images/1.jpg">
</div>
<hr>
<div id="translate" class="image">
<img alt="펜션 이미지" src="images/1.jpg">
</div>
<div id="translatex" class="image">
<img alt="펜션 이미지" src="images/1.jpg">
</div>
<div id="translatey" class="image">
<img alt="펜션 이미지" src="images/1.jpg">
</div>
<div id="translatez" class="image">
<img alt="펜션 이미지" src="images/1.jpg">
</div>
<div id="translate3d" class="image">
<img alt="펜션 이미지" src="images/1.jpg">
</div>
</body>
</html>
2) scale() - 확대 또는 축소 함수
37_transform_sclae.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS</title>
<style type="text/css">
img{border: 1px solid black;}
.image{
float: left;
margin: 20px;
background: rgba(0,0,255,0.3);
perspective: 200px;
transform-style: preserve-3d;
}
/* 😝scale(x,y) : 박스모델을 가로(X)와 세로(Y) 방향으로 확대 또는 축소하는 함수 - 단위 : 배율 */
#scale img{
transform: scale(1.2,1.2); /* x축:1.2배 y축:1.2배 */
transform: scale;
}
/* 😝scaleX(x) : 박스모델을 가로(X) 방향으로 확대 또는 축소하는 함수 - 단위 : 배율 */
#scalex img{
transform: scaleX(0.8); /* x축:0.8배 */
}
/* 😝scaleY(y) : 박스모델을 세로(Y) 방향으로 확대 또는 축소하는 함수 - 단위 : 배율 */
#scaley img{
transform: scaleY(1.2); /* y축:1.2배 */
}
/* 😝scaleZ(z) : 박스모델을 원근(Z) 방향으로 확대 또는 축소하는 함수 - 단위 : 배율 */
#scalez img{
transform: scaleZ(.8); /* z축:1.2배 - 별로 표시 안남..*/
}
/* 😝scale3d(x,y,z) : 박스모델을 입체적으로 확대 또는 축소하는 함수 - 단위 : 배율 */
#scale3d img{
transform: scale3d(1.2,1.2,.8); /* x축:1.2배, y축:1.2배, z축:0.8배*/
}
</style>
</head>
<body>
<h1>박스모델 변형 관련 스타일 속성</h1>
<hr>
<div id="original">
<h3>원본이미지</h3>
<img alt="펜션 이미지" src="images/1.jpg">
</div>
<hr>
<div id="scale" class="image">
<img alt="펜션 이미지" src="images/1.jpg">
</div>
<div id="scalex" class="image">
<img alt="펜션 이미지" src="images/1.jpg">
</div>
<div id="scaley" class="image">
<img alt="펜션 이미지" src="images/1.jpg">
</div>
<div id="scalez" class="image">
<img alt="펜션 이미지" src="images/1.jpg">
</div>
<div id="scale3d" class="image">
<img alt="펜션 이미지" src="images/1.jpg">
</div>
</body>
</html>
3) rotate() - 회전함수
38_transform_rotate.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS</title>
<style type="text/css">
img{border: 1px solid black;}
.image{
float: left;
margin: 20px;
background: rgba(0,0,255,0.3);
perspective: 200px;
transform-style: preserve-3d;
}
/* 😝 rotate(각도) : 박스모델을 가로(X)와 세로(Y) 방향으로 회전하는 함수 - 단위 : deg */
#rotate img{
transform: rotate(0.5turn); /*180도 회전*/
/*transform: rotate(45deg); /*45도 회전*/
}
/* 😝 rotateX(각도) : 박스모델을 가로(X) 방향으로 회전하는 함수 - 단위 : deg */
#rotatex img{
transform: rotateX(45deg); /*가로축으로 45도 회전*/
/*transform: rotateX(-45deg); /*가로축으로 45도 회전*/
}
/* 😝 rotateY(각도) : 박스모델을 세로(Y) 방향으로 회전하는 함수 - 단위 : deg */
#rotatey img{
transform: rotateY(45deg); /*세로축으로 45도 회전*/
/*transform: rotateY(-45deg); /*세로축으로 45도 회전*/
}
/* 😝 rotateZ(각도) : 박스모델을 원근(Z) 방향으로 회전하는 함수 - 단위 : deg */
#rotatez img{
transform: rotateZ(45deg); /*원근축으로 45도 회전*/
/*transform: rotateZ(-45deg); /*원근축으로 45도 회전*/
}
/* 😝 rotate3d(x,y,z,각도) : 박스모델을 입체적으로 회전하는 함수 - 단위 : deg */
#rotate3d img{
transform: rotate3d(-1,1,2,45deg);
}
</style>
</head>
<body>
<h1>박스모델 변형 관련 스타일 속성</h1>
<hr>
<div id="original">
<h3>원본이미지</h3>
<img alt="펜션 이미지" src="images/1.jpg">
</div>
<hr>
<div id="rotate" class="image">
<img alt="펜션 이미지" src="images/1.jpg">
</div>
<div id="rotatex" class="image">
<img alt="펜션 이미지" src="images/1.jpg">
</div>
<div id="rotatey" class="image">
<img alt="펜션 이미지" src="images/1.jpg">
</div>
<div id="rotatez" class="image">
<img alt="펜션 이미지" src="images/1.jpg">
</div>
<div id="rotate3d" class="image">
<img alt="펜션 이미지" src="images/1.jpg">
</div>
</body>
</html>
4) skew() - 비트는 함수
39_transform_skew.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS</title>
<style type="text/css">
img{border: 1px solid black;}
.image{
float: left;
margin: 20px;
background: rgba(0,0,255,0.3);
}
/* 😝 skew(각도, 각도) : 박스모델을 가로(X)와 세로(Y) 방향으로 비트는 함수 - 단위 : deg */
#skew img{
transform: skew(-25deg,-25deg);
}
/* 😝 skewX(각도) : 박스모델을 가로(X) 방향으로 비트는 함수 - 단위 : deg */
#skewx img{
transform: skewX(-25deg);
}
/* 😝 skewY(각도) : 박스모델을 세로(Y) 방향으로 비트는 함수 - 단위 : deg */
#skewy img{
transform: skewY(-25deg);
}
</style>
</head>
<body>
<h1>박스모델 변형 관련 스타일 속성</h1>
<hr>
<div id="original">
<h3>원본이미지</h3>
<img alt="펜션 이미지" src="images/1.jpg">
</div>
<hr>
<div id="skew" class="image">
<img alt="펜션 이미지" src="images/1.jpg">
</div>
<div id="skewx" class="image">
<img alt="펜션 이미지" src="images/1.jpg">
</div>
<div id="skewy" class="image">
<img alt="펜션 이미지" src="images/1.jpg">
</div>
</body>
</html>
2. Transition 관련 스타일 속성
- 트렌지션 효과(Transition Effect) : 시간 경과에 따른 박스모델의 스타일 변환 기능 제공
1) transition-property | transition-duration | transition-timing-function | transition-delay 속성
40_transition1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS</title>
<style type="text/css">
#shape div{
width:100px;
height: 100px;
background: red;
border-radius: 0;
/* 🍄 transition-property : 트렌지션 효과를 제공할 CSS 스타일 속성을 속성값으로 설정*/
transition-property: background border-radius;
/* 🍄 transition-duration : 트렌지션 효과의 제공 시간을 속성값으로 설정 - 단위 : 초(s) */
transition-duration: 3s;
/* 🍄 transition-timing-function : 트렌지션 효과의 적용 속도를 속성값으로 설정 */
/* 속성값 : linear(일정한 속도 - 기본), ease-in, ease-in, ease-in-out, cubic-bezier 함수 등 */
/* <https://easings.net> 사이트 참조 */
transition-timing-function: ease-out;
/* 🍄 transition-delay : 트렌지션 효과의 지연 시간을 속성값으로 설정 - 단위 : 초(s)*/
transition-delay: 0.5; /*0.5초 뒤에 효과 적용*/
}
#shape div:hover {
background: blue;
border-radius: 50%;
}
</style>
</head>
<body>
<h1>트렌지션 관련 스타일 속성</h1>
<hr>
<p>도형 위에 마우스 커서를 올려보세요.</p>
<div id="shape">
<div></div>
</div>
</body>
</html>
cubic-bezier 함수
cubic-bezier.com
cubic-bezier.com
2) transition 속성
41_transition2.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS</title>
<style type="text/css">
#image img{
margin: 20px;
/* opacity : 박스모델 투명도 관련 스타일 속성 */
/* 속성값 : 0.0(투명) ~ 1.0(불투명) */
opacity: 0.5;
/* 🍄 transition :
트렌지션 관련 모든 스타일 속성값 설정*/
transition: all 1s; /*모든 속성을 1초 뒤에 적용 */
}
#image img:hover {
opacity: 1.0; /*선명하게*/
transform: scale(1.2 , 1.2); /*이미지를 확대*/
}
#shape div{
width: 100px;
height: 100px;
background: url("images/f1.png") no-repeat center;
position: relative;
left: 0; /*위치:0*/
transition: all 2s; /*모든 속성을 2초 뒤에 적용 */
}
#shape:hover div{
background: url("images/f2.png") no-repeat center; /*이미지변경*/
left : 600px; /*위치:600으로 이동*/
}
</style>
</head>
<body>
<h1>트렌지션 관련 스타일 속성</h1>
<hr>
<div id="image">
<img alt="펜션 이미지" src="images/1.jpg">
<img alt="펜션 이미지" src="images/2.jpg">
<img alt="펜션 이미지" src="images/3.jpg">
</div>
<hr>
<div id="shape">
<div></div>
</div>
</body>
</html>
3) transition 속성으로 한 번에 지정하기
3. Animation 관련 스타일 속성
1) animation-name | animation-duration | animation-iteration-count | animation-direction | @keyframes 속성
42_animation.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS</title>
<style type="text/css">
#ani{
width: 100px;
height: 100px;
position: relative;
/*
left: 10px;
background: url("images/f1.png") no-repeat center;
*/
/* 🤡 animation-name : 박스모델의 적용될 애니메이션 이름을 속성값으로 설정*/
animation-name: myani;
/* 🤡 animation-duration : 박스모델의 적용될 애니메이션 지속시간을 속성값으로 설정 */
animation-duration: 5s;
/* 🤡 animation-iteration-count : 박스모델의 적용될 애니메이션 반복횟수를 속성값으로 설정 */
/* 속성값 : 정수값 또는 infinite(무한반복) */
animation-iteration-count: infinite;
/* 🤡 animation-direction : 박스모델의 적용될 애니메이션 진행방향을 속성값으로 설정 */
/* 속성값 : normal(순방향 - 기본), reverse(역방향 100% -> 0%), alternate(순방향 -> 역방향 -> 순방향), alternate-reverse(역방향 -> 순방향 -> 역방향) */
animation-direction: alternate;
}
/* @keyframes : 애니메이션의 이름과 상태, 스타일 변화를 정의하기 위한 시스템 속성*/
/* => 상태(백분율 또는 키워드 - from , to)에 따른 CSS 스타일을 작성하여 애니메이션 효과 제공 */
/* => 시작상태(from)와 종료상태(to)를 포함하여 2개 이상의 상태 작성*/
@keyframes myani {
/*시작상태*/
/*
from {
top : 0;
left: 10px;
background: url("images/f1.png") no-repeat center;
}
*/
/*종료상태*/
/*
to{
top:0;
left:600px;
background: url("images/f2.png") no-repeat center;
}
*/
0%{ /*5초의 0%*/
top : 0;
left: 10px;
background: url("https://cdn.pixabay.com/photo/2018/06/22/08/24/emotions-3490223_1280.jpg") no-repeat center;
}
25% { /*5초의 25%*/
top : 0;
left: 600px;
background: url("https://cdn.pixabay.com/photo/2018/06/22/08/24/emotions-3490223_1280.jpg") no-repeat center;
}
50% { /*5초의50% = 2.5초*/
top : 300px;
left: 600px;
background: url("https://cdn.pixabay.com/photo/2018/06/22/08/24/emotions-3490223_1280.jpg") no-repeat center;
}
75% { /*5초의 75%*/
top : 300px;
left: 10px;
background: url("https://cdn.pixabay.com/photo/2018/06/22/08/24/emotions-3490223_1280.jpg") no-repeat center;
}
100% { /*5초의 100% = 5초*/
top : 0px;
left: 10px;
background: url("https://cdn.pixabay.com/photo/2018/06/22/08/24/emotions-3490223_1280.jpg") no-repeat center;
}
}
</style>
</head>
<body>
<h1>애니메이션 관련 스타일 속성</h1>
<hr>
<div id="ani"></div>
</body>
</html>
반응형
'web > css' 카테고리의 다른 글
| [css] 7. 테이블 구조 관련 스타일 속성 (0) | 2024.05.03 |
|---|---|
| [css] 6. 박스모델 관련 스타일 속성 (0) | 2024.05.02 |
| [css] 5. 배경 관련 스타일 속성 (0) | 2024.05.02 |
| [css] 4. 문장(텍스트) | 목록 | 글자색 관련 스타일 속성 (0) | 2024.05.01 |
| [css] 3. 글꼴 | 글자 | 글자간격 | 공백 관련 스타일 속성 (0) | 2024.05.01 |
