변형과 관련된 속성들

30585 단어 CSSCSS

transform-origin속성- 변형 기준점 설정하기

앞에서 transform속성에 쓰이는 변형 함수를 배울 때 x,y,z축을 기준으로 변형했습니다.

  • 하지만 transform-origin속성을 이용하면 축이 아닌 특정 지점을 변형의 기준으로 설정할 수 있습니다. 물론 2차원, 3차원 변형 모두에서 사용 가능합니다.
속성 값설명
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

속성 값설명
<크기>원래 위치에서 사용자가 있는 방향으로 얼마나 이동하는지를 픽셀 크기로 지정합니다.
noneperspective를 지정하지 않습니다.기본 값입니다.

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>

좋은 웹페이지 즐겨찾기