2016-12-08

참고 http://animateyourhtml5.appspot.com/pres/

위 자료를 참고로 해당 문서에 있는 효과들을 하나씩 아래에 구현해 볼 예정이다.
해당 기능들은 모바일에서는 레이아웃이 깨지거나, 제대로 안보일 수 있고, IE에서는 제대로 동작하지 않는 것이 많을 것이다.

<style>
img#im14 { transform: translateZ(150px); }
img#im15 { transform: translateZ(-150px); }
div#obj1.begin { animation: rotate3d2 4s linear infinite;}
div#obj1.end { }
@keyframes rotate3d2
{
	from {transform: rotateY(0deg)   }
	to   {transform: rotateY(360deg) }
}

.scene3d
{
	perspective: 1000px;
	width: 600px;
	height: 340px;
	margin:0 0 200px 0;
}
.object3d
{
	position: absolute;
	width: inherit;
	height: inherit;
	/*top: 20px;*/
	transform-style: preserve-3d;
}
.face3d
{
	position: absolute;
	left: 165px;
	top: 15px;
}


img#im14_2 { transform: translateZ(100px); }
img#im15_2 { transform: translateZ(200px); }
div#obj1_2.begin { animation: rotate3d2_2 4s linear infinite;}
div#obj1_2.end { }
@keyframes rotate3d2_2
{
	from {transform: rotateX(0deg)   }
	to   {transform: rotateX(360deg) }
}
.scene3d_2
{
	perspective: 600px;
	width: 600px;
	height: 340px;
	margin:0 0 400px 0;
}
.object3d_2
{
	position: absolute;
	width: inherit;
	height: inherit;
	top: 20px;
	transform-style: preserve-3d;
}
.face3d_2
{
	position: absolute;
	left: 165px;
	top: 15px;
}

img#im14_3 { 
	transform: translateZ(300px); 
}
img#im15_3 { 
	transform: translateZ(300px); }
div#obj1_3.begin { animation: rotate3d2_3 4s linear infinite;}
div#obj1_3.end { }
@keyframes rotate3d2_3
{
	from {transform: rotateX(0deg)   }
	to   {transform: rotateX(360deg) }
}

div#obj1_4.begin { animation: rotate3d2_4 4s linear infinite;}
div#obj1_4.end { }
@keyframes rotate3d2_4
{
	from {transform: rotateY(0deg)   }
	to   {transform: rotateY(360deg) }
}

.scene3d_3
{
	perspective: 500px;
	width: 600px;
	height: 340px;
	margin:0 0 400px 0;
}
.object3d_3
{
	position: absolute;
	width: inherit;
	height: inherit;
	top: 20px;
	transform-style: preserve-3d;
}
.face3d_3
{
	position: absolute;
	left: 165px;
	top: 15px;
}

img#im14_5 { transform: translateZ(1px); }
img#im15_5 { transform: translateZ(0px); }
div#obj1_5.begin { animation: rotate3d2_5 4s linear infinite;}
div#obj1_5.end { }
@keyframes rotate3d2_5
{
	from {transform: rotateY(0deg)   }
	50% {transform: rotateY(180deg)   }
	to   {transform: rotateY(0deg) }
}

.scene3d_5
{
	perspective: 1000px;
	width: 600px;
	height: 340px;
	margin:0 0 100px 0;
}
.object3d_5
{
	position: absolute;
	width: inherit;
	height: inherit;
	/*top: 20px;*/
	transform-style: preserve-3d;
}
.face3d_5
{
	position: absolute;
	left: 165px;
	top: 15px;
}
</style>

<div class="scene3d" style="margin-top: 30px;border:5px solid black;">
	<div class="object3d begin" id="obj1" style="border:1px solid green;">
		<img class="face3d" src="/post_inc/html5_animate/test_img7.png" id="im14" onclick="move('obj1')"/>
		<img class="face3d" src="/post_inc/html5_animate/test_img8.png" id="im15" onclick="move('obj1')"/>
	</div>
</div>
<div class="scene3d_2" style="margin-top: 30px;border:5px solid black;">
	<div class="object3d_2 begin" id="obj1_2" style="border:1px solid green;">
		<img class="face3d_2" src="/post_inc/html5_animate/test_img7.png" id="im14_2" onclick="move('obj1_2')"/>
		<img class="face3d_2" src="/post_inc/html5_animate/test_img8.png" id="im15_2" onclick="move('obj1_2')"/>
	</div>
</div>
<div class="scene3d_3" style="margin-top: 30px;border:5px solid black;">
	<div class="object3d_3 begin" id="obj1_3" style="border:1px solid green;">
		<img class="face3d_3" src="/post_inc/html5_animate/test_img7.png" id="im14_3" onclick="move('obj1_3')"/>
	</div>
	<div class="object3d_3 begin" id="obj1_4" style="border:1px solid green;">
		<img class="face3d_3" src="/post_inc/html5_animate/test_img8.png" id="im15_3" onclick="move('obj1_4')"/>
	</div>
</div>
<div class="scene3d_5" style="margin-top: 30px;border:5px solid black;">
	<div class="object3d_5 begin" id="obj1_5" style="border:1px solid green;">
		<img class="face3d_5" src="/post_inc/html5_animate/test_img7.png" id="im14_5" onclick="move('obj1_5')"/>
		<img class="face3d_5" src="/post_inc/html5_animate/test_img8.png" id="im15_5" onclick="move('obj1_5')"/>
	</div>
</div>

• translateZ(0px) : z방향으로 지정된 양만큼 이동을 지정
• rotateX(0deg) : x-축을 중심으로 지정된 각도만큼의 시계 방향 회전
• rotateY(0deg) : y-축을 중심으로 지정된 각도만큼의 시계 방향 회전
• rotateZ(0deg) : z-축을 중심으로 지정된 각도만큼의 시계 방향 회전
• perspective : z축을 따라 캔버스로부터 관찰자의 거리, perspective 속성은 상속되지 않고 오직 직계 자식에만 적용
• transform-style : 공간에 렌더링하는 방법을 정의, flat는 2d로, preserve-3d는 3d로.
  (flat | preserve-3d | initial | inherit)
• backface-visibility : 해당 옵션을 hidden으로 주게 되면, 해당 오브젝트의 rotate 값이 180deg로 뒷면이 보이게 될때는 안보이게 된다.

우선 해당 효과들은 IE에서는 제대로 적용 안될것이다.
그리고 간단히 해당 효과들에 대해서 설명하겠다. 제일 처음의 예제를 예로 들어보겠다.
1. 우선 .scene3d이 적용된, 전체 틀을 준비한다.
2. .object3d에서 해당 오브젝트를 3d로 취급하기 위해서 transform-style을 preserve-3d로 지정한다.
3. #obj1을 transform: rotateY()을 이용하여 Y축으로 회전 시킨다.
4. .object3d 안에 있는 2개의 img에 transform: translateZ()로 z축에서 거리를 준다.
5. 결과적으로 #obj1객체 에서 z축이 ±150px 만큼 떨어져서 Y축으로 회전하는 2개의 img가 표현 된다.



http://b1ix.net/284 에서 계속....