2016-12-09

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

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

<style>
img#im22 { top: 30px; transform: translateZ(150px); }
img#im23 { top: 30px; transform: translateZ(-150px); }
img#im24 { top: 30px; transform: translateX(150px) rotateY(90deg);}
img#im25 { top: 30px; transform: translateX(-150px) rotateY(-90deg);}
img#im26 { top: 30px; transform: translateY(150px) rotateX(90deg);}
img#im27 { top: 30px; transform: translateY(-150px) rotateX(-90deg);}

:hover > #im22 { top: 30px; transform: translateZ(250px); }
:hover > #im23 { top: 30px; transform: translateZ(-250px); }
:hover > #im24 { top: 30px; transform: translateX(250px) rotateY(90deg);}
:hover > #im25 { top: 30px; transform: translateX(-250px) rotateY(-90deg);}
:hover > #im26 { top: 30px; transform: translateY(250px) rotateX(90deg);}
:hover > #im27 { top: 30px; transform: translateY(-250px) rotateX(-90deg);}

div#obj4 img{transition: 0.5s linear;}

div#obj4
{
	transform: rotateX(30deg) rotateY(30deg) rotateZ(10deg);
	border: 3px solid blue;
}
div#obj4.begin
{
	animation: rotate3d4 linear infinite 14s;
}
@keyframes rotate3d4
{
	from { transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
	to   { transform: rotateX(360deg) rotateY(720deg) rotateZ(1080deg); }
}

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

/* ================== */

img#im22_2 { top: 30px; transform: translateZ(150px); animation: im22_2_animation linear infinite 8s;}
img#im23_2 { top: 30px; transform: translateZ(-150px); animation: im23_2_animation linear infinite 8s;}
img#im24_2 { top: 30px; transform: translateX(150px) rotateY(90deg); animation: im24_2_animation linear infinite 8s;}
img#im25_2 { top: 30px; transform: translateX(-150px) rotateY(-90deg); animation: im25_2_animation linear infinite 8s;}
img#im26_2 { top: 30px; transform: translateY(150px) rotateX(90deg); animation: im26_2_animation linear infinite 8s;}
img#im27_2 { top: 30px; transform: translateY(-150px) rotateX(-90deg); animation: im27_2_animation linear infinite 8s;}
div#obj4_2
{
	transform: rotateX(30deg) rotateY(30deg) rotateZ(10deg);
	border: 3px solid blue;
}
div#obj4_2.begin
{
	animation: rotate3d4_2 linear infinite 16s;
}
@keyframes rotate3d4_2
{
	from { transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
	10% { transform: rotateX(360deg) rotateY(0deg) rotateZ(0deg);}
	30% { transform: rotateX(360deg) rotateY(360deg) rotateZ(0deg); }
	50% { transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg); }
	to { transform: rotateX(720deg) rotateY(1080deg) rotateZ(1420deg); }
}

@keyframes im23_2_animation
{
	from { transform: translateZ(-150px) scale(1); }
	50% { transform: translateZ(-350px) scale(2); }
	to { transform: translateZ(-150px) scale(1); }
}

@keyframes im22_2_animation
{
	from { transform: translateZ(150px) scale(1); }
	50% { transform: translateZ(350px) scale(2); }
	to { transform: translateZ(150px) scale(1); }
}

@keyframes im24_2_animation
{
	from { transform: translateX(150px) rotateY(90deg) scale(1); }
	50% { transform: translateX(350px) rotateY(90deg) scale(2); }
	to { transform: translateX(150px) rotateY(90deg) scale(1); }
}

@keyframes im25_2_animation
{
	from { transform: translateX(-150px) rotateY(-90deg) scale(1); }
	50% { transform: translateX(-350px) rotateY(-90deg) scale(2); }
	to { transform: translateX(-150px) rotateY(-90deg) scale(1); }
}

@keyframes im26_2_animation
{
	from { transform: translateY(150px) rotateX(90deg) scale(1); }
	50% { transform: translateY(350px) rotateX(90deg) scale(2); }
	to { transform: translateY(150px) rotateX(90deg) scale(1); }
}

@keyframes im27_2_animation
{
	from { transform: translateY(-150px) rotateX(90deg) scale(1); }
	50% { transform: translateY(-350px) rotateX(90deg) scale(2); }
	to { transform: translateY(-150px) rotateX(90deg) scale(1); }
}


.scene3d_2
{
	perspective: 1000px;
	width: 600px;
	height: 340px;
	border:3px solid black;
	margin:600px 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;
	/*backface-visibility:hidden;*/
}
</style>

<div class="scene3d begin" id="sce4" onclick="move('obj4')">
	<div class="object3d begin" id="obj4">
		<img class="face3d" src="/post_inc/html5_animate/test_img9.png" id="im22" />
		<img class="face3d" src="/post_inc/html5_animate/test_img10.png" id="im23" />
		<img class="face3d" src="/post_inc/html5_animate/test_img11.png" id="im24" />
		<img class="face3d" src="/post_inc/html5_animate/test_img12.png" id="im25" />
		<img class="face3d" src="/post_inc/html5_animate/test_img13.png" id="im26" />
		<img class="face3d" src="/post_inc/html5_animate/test_img14.png" id="im27" />
	</div>
</div>
<div class="scene3d_2 begin" id="sce4_2" onclick="move('obj4_2')">
	<div class="object3d_2 begin" id="obj4_2">
		<img class="face3d_2" src="/post_inc/html5_animate/test_img9.png" id="im22_2" />
		<img class="face3d_2" src="/post_inc/html5_animate/test_img10.png" id="im23_2" />
		<img class="face3d_2" src="/post_inc/html5_animate/test_img11.png" id="im24_2" />
		<img class="face3d_2" src="/post_inc/html5_animate/test_img12.png" id="im25_2" />
		<img class="face3d_2" src="/post_inc/html5_animate/test_img13.png" id="im26_2" />
		<img class="face3d_2" src="/post_inc/html5_animate/test_img14.png" id="im27_2" />
	</div>
</div>

이전까지의 효과들을 응용해서 만들어진 3d큐브이다.
현재까진.. IE에서는 안되고 크롬과 화폭에서는 잘 실행된다.



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