안녕하세요. 명월입니다.
이 글은 CSS의 트랜스폼 (transform)에 대한 글입니다.
트랜스 폼(transform)은 요소를 3차원적인 회전, 확대, 축소하는 스타일을 뜻합니다.
아래와 같은 형태라고 생각하면 됩니다.
안녕하세요.
명월일지입니다.
트랜스 폼의 속성은 transform, transform-origin, perspective, transform-style, perspective-origin, backface-visibility의 6가지의 속성이 있습니다.
transform의 속성은 변경 스타일을 지정하는 것입니다. 회전(rotate), 이동(translate) 3D 축 이동(translate3d) 옵션이 있습니다. 스크루 옵션(scew), 확대, 축소(scale), 3차원적인 확대, 축소 (scake)도 있습니다.
참조 - https://www.w3schools.com/cssref/css3_pr_transform.asp
참조 - https://www.w3.org/Talks/2012/0416-CSS-WWW2012/Demos/transforms/demo-translate3d-cube.html
transform-origin의 속성은 회전축을 설정하는 것입니다. 기본 값은 "transform-origin: center center"입니다. 옵션은 matrix, transrate, scale, rotate, skew가 있고, 두세 개를 중첩해서 설정할 수 있습니다.
perspective은 투영점울 설정하는 것입니다. perspective-origin은 투영점의 방향(기본값은 100px 100px)입니다. origin의 위치에서 perspective은 투영점입니다.
transform-style은 perspective와 perspective-origin을 사용하려면 설정하는 속성입니다. 값은 "transform-style : preserve-3d;" 뿐입니다.
<!DOCTYPE html>
<html>
<head>
<style>
/* div 요소를 설정하는 스타일*/
.cube {
/* 투영점은 300px 300px 왼쪽 위쪽에서 오른쪽 아래 방향 */
perspective-origin: 300px 300px;
/* 투영점 */
perspective: 300px;
/* perspective와 perspective-origin을 사용하려면 설정 */
transform-style: preserve-3d;
/* 여백 설정*/
margin-top: 400px;
/* 여백 설정*/
margin-left: 400px;
}
/* 큐브의 6개 면 공통 설정 */
.cube .face {
display: block;
/* 위치 설정 */
position: absolute;
/* 너비, 높이 100px인 정사각형 */
width: 100px;
height: 100px;
line-height: 100px;
/* 기본 색은 흰색 */
color: white;
/* 글자 가운데 정렬 */
text-align: center;
}
/* 앞 면 */
.cube .front {
/* 검정색의 투명도 0.3 */
background: rgba(0, 0, 0, 0.3);
/* z축 방향으로 50px 거리 */
transform: translateZ(50px);
}
/* 뒷 면 */
.cube .back {
/* 녹색 */
background: rgba(0, 255, 0, 1);
/* 글씨 검정색 */
color: black;
/* y축으로 180도 회전, z축 방향으로 50px 거리 */
/* 앞면과 z축이 같기 때문에 사이즈가 같은데, y축을 기준으로 180도 돌린 것*/
transform: rotateY(180deg) translateZ(50px);
}
/* 오른쪽 면 */
.cube .right {
/* 약간 빨간색의 투명도 0.7 */
background: rgba(196, 0, 0, 0.7);
/* y축으로 90도 회전, z축 방향으로 50px 거리 */
/* 앞면과 z축이 같기 때문에 사이즈가 같은데, y축을 기준으로 90도 돌린 것*/
transform: rotateY(90deg) translateZ(50px);
}
/* 왼쪽 면*/
.cube .left {
/* 약간 파란색의 투명도 0.7 */
background: rgba(0, 0, 196, 0.7);
/* y축으로 -90도 회전, z축 방향으로 50px 거리 */
/* 앞면과 z축이 같기 때문에 사이즈가 같은데, y축을 기준으로 -90도 돌린 것*/
transform: rotateY(-90deg) translateZ(50px);
}
/* 윗 면 */
.cube .top {
/* 약간 노란색의 투명도 0.7 */
background: rgba(196, 196, 0, 0.7);
/* x축으로 90도 회전, z축 방향으로 50px 거리 */
/* 앞면과 z축이 같기 때문에 사이즈가 같은데, x축을 기준으로 90도 돌린 것*/
transform: rotateX(90deg) translateZ(50px);
}
/* 바닥 면 */
.cube .bottom {
/* 약간 핑크색의 투명도 0.7 */
background: rgba(196, 0, 196, 0.7);
/* x축으로 -90도 회전, z축 방향으로 50px 거리 */
/* 앞면과 z축이 같기 때문에 사이즈가 같은데, x축을 기준으로 -90도 돌린 것*/
transform: rotateX(-90deg) translateZ(50px);
}
</style>
</head>
<body>
<div class="cube">
<!-- 앞 면 -->
<div class="face front">1</div>
<!-- 뒷 면 -->
<div class="face back">2</div>
<!-- 오른쪽 면 -->
<div class="face right">3</div>
<!-- 왼쪽 면 -->
<div class="face left">4</div>
<!-- 윗 면 -->
<div class="face top">5</div>
<!-- 바닥 면 -->
<div class="face bottom">6</div>
</div>
</body>
</html>
123456
backface-visibility의 속성은 transform 요소에서 뒷면으로 뒤집힐 때 면이 보이는 것 여부를 설정하는 것이다.
예를 들면 위 rotateX나 rotateY나 rotateZ를 180도(180deg) 설정할 때 보이게 표시하는 여부를 설정합니다.
<!DOCTYPE html>
<html>
<head>
<style>
/* 두개의 사각형 item 공통 설정 */
.item {
/* 정사각형 */
display: inline-block;
width: 100px;
height: 100px;
/* 여백 설정 */
margin: 10px;
/* 색은 파란색 */
background-color: blue;
/* 트랜지션 2초 */
transition: 2s;
/* 글씨색 흰색 */
color:white;
}
/* 뒤집힐 때 보이기 설정*/
.item-1 {
backface-visibility: visible;
}
/* 뒤집힐 때 안 보이기 설정*/
.item-2 {
backface-visibility: hidden;
}
/* 체크 박스가 체크되면 그 다음 .item들은 Y축으로 180도 뒤집는다. */
.item-test-checkbox:checked ~ .item {
transform: rotateY( 180deg );
}
</style>
</head>
<body>
<!-- 체크 박스의 액션 -->
<input type="checkbox" class="item-test-checkbox">click!<br />
<div class="item item-1">테스트</div>
<div class="item item-2">테스트</div>
</body>
</html>
click!
테스트테스트
이번에는 웹 페이지에서 자주 사용하는 예제입니다.
<!DOCTYPE html>
<html>
<head>
<style scoped="scoped">
/* div요소 설정 */
div#exam1 {
/* 바탕색은 파란색 */
background-color: blue;
/* 너비 100% */
width: 100%;
/* 글씨 크기 20px */
font-size: 20px;
/* 글씨 색은 흰색 */
color: white;
/* 안 여백 100px */
padding: 100px;
}
/* 클래스가 off가 있으면 */
div#exam1.off {
/* 트랜지션을 회전으로 설정 */
transition-property: transform;
/* 트랜지션 시간은 1초 */
transition-duration: 1s;
/* x축 회전 -90이면, 안 보인다. */
transform: perspective(100px) rotateX(-90deg);
/* 회전 기준 위쪽. */
transform-origin: top;
}
/* 클래스가 on가 있으면 */
div#exam1.on {
/* 트랜지션을 회전으로 설정 */
transition-property: transform;
/* 트랜지션 시간은 1초 */
transition-duration: 1s;
/* x축 회전 0. 기본 수치 */
transform: rotateX(0deg);
/* 회전 기준 위쪽. */
transform-origin: top;
}
</style>
</head>
<body>
<!-- jquery 라이브러리 -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
// 버튼을 클릭하면
function exam1() {
// exam1 id를 가진 div 요소의 클래스에 on이 있으면
if ($("div#exam1").hasClass("on")) {
// 클래스 on을 제거한다.
$("div#exam1").removeClass("on");
// 클래스 off를 추가한다.
$("div#exam1").addClass("off");
return;
}
// 클래스 off을 제거한다.
$("div#exam1").removeClass("off");
// 클래스 on을 추가한다.
$("div#exam1").addClass("on");
return;
}
</script>
<div id="exam1" class="off">안녕하세요.</div>
<input type="button" value="눌러보세요." style="width:100%;" onclick="exam1()">
</div>
</body>
</html>
안녕하세요.
위 버튼을 눌러보시면 사각형 박스가 위에서 열리는 것처럼 보이는 효과입니다. 예전에 Bootstrap의 사용자 메뉴에서 사용자 설정할 때 사용하던 스타일입니다.
요즘에는 이런 스타일의 메뉴는 없지만, 갑자기 생각나서 작성해봤습니다.
여기까지 CSS의 트랜스폼 (transform)에 대한 설명이었습니다.
궁금한 점이나 잘못된 점이 있으면 댓글 부탁드립니다.
'Study > Javascript, Jquery, CSS' 카테고리의 다른 글
| [Javascript] 변수 선언, 제어문, 함수 사용법 (0) | 2020.03.23 |
|---|---|
| [CSS] 브라우저에서 CSS를 개발하는 방법(브라우저 개발 모드) (0) | 2020.03.13 |
| [CSS] 색 스타일(color style) - 그라데이션(gradient) (2) | 2020.03.10 |
| [CSS] 애니메이션(animation) (0) | 2020.02.28 |
| [CSS] 트랜지션 (transition) (0) | 2020.02.18 |
| [CSS] Column 요소 스타일 (0) | 2020.02.17 |
| [CSS] 정렬 스타일(float) (0) | 2020.02.12 |
| [CSS] 위치(postion)과 요소 객체 스타일(display) (0) | 2020.01.29 |