[HTML5 & CSS3] 변형과 관련된 속성들

▶ 변형과 관련된 속성들

앞에서 배운 변형 함수들에서 2차원 변형에 원근감을 추가하면 3차원 변형을 만들 수 있는데 이때 단순히 z축만 추가한다고 해서 원근감이 생기지는 않는다. 다시 말해 변형할 때 기준이 되는 지점을 바꾸거나 요소의 원근감을 표현하기 위한 다른 속성도 필요하다.

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

앞에서 transform 속성에 쓰이는 변형 함수를 배울 때 x축과 y축, z축을 기준으로 변형했다. 그런데 transform-origin 속성을 이용하면 축이 아닌 특정 지점을 변형의 기준으로 설정할 수 있다. 물론 2차원 변형과 3차원 변형 모두에서 사용 가능하다.

기본형)

transform-origin: <x축> <y축> <z축> | initial | inherit ;

속성 값	설명
<x축>	원점 기준의 x 좌푯값으로 길이 값이나 <백분율>, left, center, right 중에서 사용할 수 있다.
<y축>	원점 기준의 y 좌푯값으로 길이 값이나 <백분율>, top, center, bottom 중에서 선택할 수 있다.
<z축>	원점 기준의 z 좌푯값으로 길이 값만 사용할 수 있다.

<style>
   .rose {
      -moz-transform: rotateZ(10deg);
      -ms-transform: rotateZ(10deg);
      -o-transform: rotateZ(10deg);
      -webkit-transform: rotateZ(10deg);
      transform: rotateZ(10deg);
   }
   .ltop .rose {
      -webkit-transform-origin: left top;
      -ms-transform-origin: left top;
      -moz-transform-origin: left top;
      -o-transform-origin: left top;
      transform-origin: left top;
   }
   .rtop .rose {
      -webkit-transform-origin: right top;
      -ms-transform-origin: right top;
      -moz-transform-origin: right top;
      -o-transform-origin: right top;
      transform-origin: right top;
   }
   .lbottom .rose {
      -webkit-transform-origin: left bottom;
      -ms-transform-origin: left bottom;
      -moz-transform-origin: left bottom;
      -o-transform-origin: left bottom;
      transform-origin: left bottom;
   }
   .rbottom .rose {
      -webkit-transform-origin: right bottom;
      -ms-transform-origin: right bottom;
      -moz-transform-origin: right bottom;
      -o-transform-origin: right bottom;
      transform-origin: right bottom;
   }
</style>

<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>

*perspective, perspective-origin 속성 - 원근감 표현하기

perspective 속성은 3차원 변형에서 사용하는 속성으로 원래 위치에서 사용자가 있는 방향이나 반대 방향으로 잡아당기거나 밀어내 원근감을 갖게 한다. 속성 값은 0보다 커야 하며 값이 클수록 사용자로부터 멀어진다.

기본형)

perspective: <크기> | none ;

속성 값	크기
<크기>	원래 위치에서 사용자가 있는 방향으로 얼마나 이동하는지를 픽셀 크기로 지정한다.
none	perspective를 지정하지 않는다.

perspective-origin 속성을 사용하면 좀 더 높은 곳에서 원근을 조절하는 듯한 느낌을 만들 수 있다. perspective-origin 속성으로 입체적으로 표현할 요소의 아랫부분(bottom) 위치를 지정할 수 있기 때문이다.

기본형)

perspective-origin: <x축 값> | <y축 값> ;

속성 값	설명
<x축 값>	웹 요소가 x축에서 어디에 위치하는지를 지정한다. 사용할 수 있는 값은 길이 값이나 백분율, left, right, center이다. 기본 값은 50%이다.
<y축 값>	웹 요소가 y축에서 어디에 위치하는지를 지정한다. 사용할 수 있는 값은 길이 값이나 백분율, top, center, bottom이다. 기본 값은 50%이다.

<style>
   #no-pers, #pers {
      width: 152px;
      height: 180px;
      border: 1px solid black;
      margin: 30px;
      float: left;
   }
   .rotatex img {
      -webkit-transform: rotateX(50deg);
      -ms-transform: rotateX(50deg);
      -moz-transform: rotateX(50deg);
      -o-transform: rotateX(50deg);
      transform: rotateX(50deg);
   }
   #pers {
      -moz-perspective: 300px;
      -ms-perspective: 300px;
      -webkit-perspective: 300px;
      perspective: 300px;
   }
</style>

<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>

*transform-style 속성 - 3D 변형 적용하기

여러 가지 변형을 동시에 적용할 때 transform-style 속성을 사용하면 부모 요소에 적용한 3D 변형을 하위 요소에도 적용할 수 있다.

<style>
   .box1 {
      background: #82cbd8;
      -webkit-transform: rotateY(45deg);
      -moz-transform: rotate(45deg);
      -o-transform: rotateY(45deg);
      -ms-transform: rotateY(45deg);
      transform: rotateY(45deg);
   }
   .box2 {
      background: #0d6097;
      -webkit-transform-origin: left top;
      -moz-transform-origin: left top;
      -ms-transform-origin: left top;
      -o-transform-origin: left top;
      transform-origin: left top;
      -webkit-transform: rotateY(45deg);
      -moz-transform: rotateX(45deg);
      -ms-transform: rotateX(45deg);
      -o-transform: rotateX(45deg);
      transform: rotateX(45deg);
   }
   #tr-style1 {
      -webkit-transform-style: flat;
      transform-style: flat;
   }
   #tr-style2 {
      -webkit-transform-style: preserve-3d;
      transform-style: preserve-3d;
   }
</style>

<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>

*backface-visibility 속성 - 요소의 뒷면 표시하기

backface-visibility 속성은 요소의 뒷면, 즉 반대쪽 면을 표시할 것인지를 결정한다.

기본형)

perspective-origin: <x축 값> | <y축 값> ;

속성 값	설명
visible	뒷면을 표시한다.
hidden	뒷면을 표시하지 않는다.

<style>
   .box {
      background: #82cbd8;
      -webkit-transform: rotateY(135deg);
      -moz-transform: rotate(135deg);
      -ms-transform: rotateY(135deg);
      -o-transform: rotateY(135deg);
      transform: rotateY(135deg);
   }
   #back1 {
      -webkit-backface-visibility: hidden;
      -moz-backface-visibility: hidden;
      backface-visibility: hidden;
   }
   #back2 {
      -webkit-backface-visibility: visible;
      -moz-backface-visibility: visible;
      backface-visibility: visible;
   }
</style>

<body>
<div class="container">
<div class="box" id="back1">
<h1>BACK</h1>
</div>
</div>
<div class="container">
<div class="box" id="back2">
<h1>BACK</h1>
</div>
</div>
</body>

저작자표시

'HTML5 & CSS3' 카테고리의 다른 글

[HTML5 & CSS3] 애니메이션 (0)	2021.02.14
[HTML5 & CSS3] 트랜지션 (0)	2021.02.14
[HTML5 & CSS3] 변형 (0)	2021.02.14
[HTML5 & CSS3] 가상 클래스와 가상 요소 (0)	2021.02.14
[HTML5 & CSS3] 속성 선택자 (0)	2021.02.14

🐠붕어의 코딩 공부 기록🐠

[HTML5 & CSS3] 변형과 관련된 속성들

▶ 변형과 관련된 속성들

'HTML5 & CSS3' 카테고리의 다른 글

댓글

티스토리툴바

[HTML5 & CSS3] 변형과 관련된 속성들

▶ 변형과 관련된 속성들

'HTML5 & CSS3' 카테고리의 다른 글

관련글

댓글

티스토리툴바