변형과 관련된 속성들
transform-origin속성- 변형 기준점 설정하기
앞에서 transform속성에 쓰이는 변형 함수를 배울 때 x,y,z축을 기준으로 변형했습니다.
- 하지만 transform-origin속성을 이용하면 축이 아닌 특정 지점을 변형의 기준으로 설정할 수 있습니다. 물론 2차원, 3차원 변형 모두에서 사용 가능합니다.
앞에서 transform속성에 쓰이는 변형 함수를 배울 때 x,y,z축을 기준으로 변형했습니다.
| 속성 값 | 설명 |
|---|---|
| x축 | 원점 기준의 x좌표값으로 길이 값이나 <백분율>,left,center,right중에서 사용할 수 있습니다. |
| y축 | 원점 기준의 y좌표값으로 길이 값이나 <백분율>,top,center,bottom중에서 사용할 수 있습니다. |
| z축 | 원점 기준의 z좌표값으로 길이 값만 사용할 수 있습니다. |
다음 예제는 네 개의 이미지에 transform:rotateX(10deg)라는 변형을 똑같이 추가해 z축으로 기준으로 10º만큼 회전한 것입니다. 각 이미지마다 tranform-origin값을 다르게 주어 결과 값이 어떻게 잘라지는 지 확인해 봅니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>Transform</title>
<style>
.origin {
width: 160px;
height: 240px;
border: 1px solid black;
float: left;
margin: 40px;
}
.rose {
transform: rotateZ(10deg);
}
.ltop .rose:hover {
transform-origin: left top;
}
.rtop .rose:hover {
transform-origin: right top;
}
.lbottom .rose:hover {
transform-origin: left bottom;
}
.rbottom .rose:hover {
transform-origin: right bottom;
}
</style>
</head>
<body>
<div class="origin">
<div class="ltop">
<img src="images/rose.jpg" class="rose">
</div>
</div>
<div class="origin">
<div class="rtop">
<img src="images/rose.jpg" class="rose">
</div>
</div>
<div class="origin">
<div class="lbottom">
<img src="images/rose.jpg" class="rose">
</div>
</div>
<div class="origin">
<div class="rbottom">
<img src="images/rose.jpg" class="rose">
</div>
</div>
</body>
</html>
perspective, perspective-origin속성-원근감 표현하기
perspective속성은 3차원 변형에서 사용하는 속성으로 원래 위치에서 사용자가 있는 방향이나 반대 방향으로 잡아당기거나 밀어내 원근감을 갖게 합니다.
- 속성 값은 0보다 커야 하며 값이 클수록 사용자로부터 멀어집니다.
perspective
perspective속성은 3차원 변형에서 사용하는 속성으로 원래 위치에서 사용자가 있는 방향이나 반대 방향으로 잡아당기거나 밀어내 원근감을 갖게 합니다.
| 속성 값 | 설명 |
|---|---|
| <크기> | 원래 위치에서 사용자가 있는 방향으로 얼마나 이동하는지를 픽셀 크기로 지정합니다. |
| none | perspective를 지정하지 않습니다.기본 값입니다. |
perspective-origin
| 속성 값 | 설명 |
|---|---|
| <x축값> | 웹 요소가 x축에서 어디에 위치하는지를 지정합니다.사용할 수 있는 값은 길이 값이나 백분율,left,right,center입니다. 기본값은 50% 입니다. |
| <y축값> | 웹 요소가 y축에서 어디에 위치하는지를 지정합니다.사용할 수 있는 값은 길이 값이나,백분율,top,center,bottom입니다.기본값은 50% 입니다. |
이미지 회전하며 원금감 주기
x축을 기준으로 이미지를 회전시켰을 떄와 x축을 기준으로 회시키는 동시에 perspective:300px로 원감을 주었을 때를 비교한 것입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>Transform</title>
<style>
#no-pers, #pers {
width:152px;
height:180px;
border:1px solid black;
margin:30px;
float:left;
}
.rotatex img {
transform: rotateX(50deg);
}
#pers:hover {
perspective: 300px;
}
</style>
</head>
<body>
<h4>원본 이미지</h4>
<div>
<img src="images/sunset.jpg" alt="">
</div>
<div id="no-pers">
<div class="rotatex">
<img src="images/sunset.jpg" alt="">
</div>
</div>
<div id="pers">
<div class="rotatex">
<img src="images/sunset.jpg" alt="">
</div>
</div>
</body>
</html>transform-style속성-3D 변형 적용하기
여러가지 변형을 동시에 적용할 때 transform-style속성을 사용하면 부모 요소에 적용한 3D 변형을 하위 요소에도 적용할 수 있습니다.
다음 예제는 rotateX,rotateY를 이용해 두 개의 사각형을 회전시킨 것입니다. .box1요소에는 rotateY()를 적용하고, 그 하위에 있는 .box2요소에는 rotateX()를 적용하는데 transform-style의 속성을 flat으로 했을 때와 preserve-3d로 했을 때 어떻게 달라지는지 살펴봅니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>Transform</title>
<style>
div {
width:200px;
height:200px;
}
.container{
border:1px solid black;
perspective:300px;
margin-top:100px;
margin-left:100px;
float:left;
}
.box1 {
background:#82cbd8;
transform: rotateY(45deg);
}
.box2 {
background: #0d6097;
transform-origin: left top;
transform: rotateX(45deg);
}
#tr-style1 {
transform-style: flat;
}
#tr-style2 {
transform-style: preserve-3d;
}
</style>
</head>
<body>
<div class="container">
<div class="box1" id="tr-style1">
<div class="box2"></div>
</div>
</div>
<div class="container">
<div class="box1" id="tr-style2">
<div class="box2"></div>
</div>
</div>
</body>
</html>
여러가지 변형을 동시에 적용할 때 transform-style속성을 사용하면 부모 요소에 적용한 3D 변형을 하위 요소에도 적용할 수 있습니다.
다음 예제는 rotateX,rotateY를 이용해 두 개의 사각형을 회전시킨 것입니다. .box1요소에는 rotateY()를 적용하고, 그 하위에 있는 .box2요소에는 rotateX()를 적용하는데 transform-style의 속성을 flat으로 했을 때와 preserve-3d로 했을 때 어떻게 달라지는지 살펴봅니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>Transform</title>
<style>
div {
width:200px;
height:200px;
}
.container{
border:1px solid black;
perspective:300px;
margin-top:100px;
margin-left:100px;
float:left;
}
.box1 {
background:#82cbd8;
transform: rotateY(45deg);
}
.box2 {
background: #0d6097;
transform-origin: left top;
transform: rotateX(45deg);
}
#tr-style1 {
transform-style: flat;
}
#tr-style2 {
transform-style: preserve-3d;
}
</style>
</head>
<body>
<div class="container">
<div class="box1" id="tr-style1">
<div class="box2"></div>
</div>
</div>
<div class="container">
<div class="box1" id="tr-style2">
<div class="box2"></div>
</div>
</div>
</body>
</html>
Author And Source
이 문제에 관하여(변형과 관련된 속성들), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@jyyoun1022/변형과-관련된-속성들저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
