【CSS】transform-style : 자식 요소를 3D 공간에 배치하거나 2D 평면에 평평하게 배치 할지를 지정하기

transform 속성은 요소의 자식 요소가 입체적인 3D 공간에 배치 될지, 요소의 표면에 평평하게 묘사할 지를 결정합니다.

기본 값은 "flat"로, 자식 요소는 2D의 2차원에서 부모 요소와 동일한 평면에 배치되지만, "transform-style : preserve-3d;"을 지정하여 3D 공간에 배치되도록 됩니다.

▼　아래의 애니메이션에서 큰 원(SUN)에 마우스 포인터를 가져다 대 보십시요.

SUN

earth

mars

transform-style: preserve-3d;

위 예제는 부모 요소(SUN)의 주변에 자식 요소가 2 개(earth와 mars)가 따라 다니고 있는 애니메이션입니다.

먼저 3D 공간의 깊이를 위해 "perspective : 1200px;" 정도로 지정합니다. 또한 3D 공간을 묘사하기 위해서, 부모 요소에 "transform-style : preserve-3d;"를 지정했습니다.

#universe {
      position: relative;
      height: 350px;
      width: 350px;
      perspective: 1200px;
      }
#sun {
	position: absolute;
	width: 300px;
	height: 300px;
	border-radius: 50%;
	background-color: #e4e4e4;
	border: 20px solid #333;
	box-shadow: inset 0 2px 45px #7c7c7e;
	opacity: 0.8;
	transform-style: preserve-3d;
	animation: spin 20s linear infinite;
    }

스폰서 링크

transform-style: flat;

부모 요소에 마우스 오버했을 때 3D 공간에서 2D 평면에 평면 운동을 전환하기 위해 "transform-style : flat;"를 지정했습니다.

부모 요소에 "flat"값을 지정하면 그 자식 요소도 2D 평면으로 평평하게 그려집니다.

 #sun:hover {
	cursor:pointer;
	transform-style:flat;
    }

▼　위의 부모 요소에 지정된 애니메이션 'animation : spin 20s linear infinite;은, 아래와 같이 @keyframes에서 Y축으로 360도 회전시키는 구체적인 움직임을 지정했습니다.

@keyframes spin {
  0% { transform: rotateY(0); }
  100%  { transform:rotateY(360deg); }
  }

▼　아래와 같이 부모 요소에 속하는 하위 요소의 박스를 지정합니다. 회전 박스의 중심점을 지정합니다. 여기에서는 기본 값인 '50 % 50 %;(중앙)」으로 지정했습니다.

    #sun > div {
	position: absolute;
	top: 100px;
	left: 100px;
	width: 100px;
	height: 100px;
	border-radius: 50%;
	box-sizing: border-box;
    transform-origin: 50% 50%;
	color:#FFF;
    }

▼　아래와 같이 자식 요소 2 개를 각각 지정합니다.

 #sun > :first-child {
      background-color: #00c2f2;/*blue(earth)*/
	  animation: f-childspin 3s linear infinite;
      }

 #sun > :last-child {
      background-color: #f88222;/*orange(mars)*/
	  animation: l-childspin 1s linear infinite; 
      }

또한, 두 개의 자식 요소에 각각 @keyframes을 사용하여 애니메이션의 구체적인 움직임을 지정합니다. 여기에서는 "translateZ (깊이)"와 "rotateY(Y 축에 대한 회전)" 으로 애니메이션을 붙였습니다.

  @keyframes f-childspin {
    0% { transform: translateZ(-150px) rotateY(0deg);}
    100% { transform:translateZ(-150px) rotateY(360deg);}
    }
  @keyframes l-childspin {
    0% { transform: translateZ(150px) rotateY(0); }
    100% { transform:translateZ(150px) rotateY(-360deg);}
    }

각 브라우저의 사양이 각각 다르기 때문에, 같은 CSS를 지정해도 브라우저마다 또는 버전에 따라 지원하는 환경이 달라집니다. 그래서 홈페이지에 표시되는 것도 브라우저마다 다를 수 나옵니다.

이를 최대한 억제하고 각 브라우저에서 제대로 표시하기 위해 준비되어 있는 것이 벤더 접두사(vendor prefix)입니다. 이것을 CSS를 쓰고 더하는 것으로 표시의 불안정이 적게되는 것 같습니다.

서서히 브라우저 지원 환경이 개선되고 있기 때문에 시간이 지날수록 벤더 접두사가 필요 없게 되는시기가 올 것입니다. 당분간은 페이지에서 병행하는 것이 좋을지도 모릅니다.

벤더 접두사(vendor prefixes)

 div {
 　-webkit-transform-style: preserve-3d;
   -ms-transform-style: preserve-3d;
 　-moz-transform-style: preserve-3d;
 　-o-transform-style: preserve-3d;
 　transform-style: preserve-3d;
 　}

스폰서 링크