PHP JavaScript: Animation

Animated 3D Cube Using HTML CSS JAVASCRIPT

	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<script src="https://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
	<title>CSS3 3D Cube</title>
	<style>
	body{line-height:1}
	nav ul{list-style:none}
	blockquote,q{quotes:none}
	blockquote:before,blockquote:after,q:before,q:after{content:none}
	a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}
	ins{background-color:#ff9;color:#000;text-decoration:none}
	mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold}
	del{text-decoration:line-through}
	abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}
	table{border-collapse:collapse;border-spacing:0}
	hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}
	input,select{vertical-align:middle}
	a, a:visited {
	color: #0101d0;
	font-weight: bold;
	cursor: pointer;
	font-size: 20px;
	font-family: arial;
	line-height: 20px;
	display: inline-block;
	padding: 10px;
	}
	a:hover {
	color: #000;
	}
	#wrapD3Cube {
	width: 250px;
	height: 213px;
	margin: 20px auto;
	background-color: #EEE;
	}
	#D3Cube {
	width: 112px;
	height: 112px;
	top: 50px;
	transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;
	transform: rotateX(-22deg) rotateY(-38deg) rotateZ(0deg);
	-moz-transform: rotateX(-22deg) rotateY(-38deg) rotateZ(0deg);
	-webkit-transform: rotateX(-22deg) rotateY(-38deg) rotateZ(0deg);
	margin: auto;
	position: relative;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
	}
	#D3Cube > div {
	position: absolute;
	-webkit-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
	width: 112px;
	height: 112px;
	float: left;
	overflow: hidden;
	opacity: 0.85;
	}
	#side1 {
	transform: rotatex(90deg) translateX(0px) translateY(0px) translateZ(56px);
	-moz-transform: rotatex(90deg) translateX(0px) translateY(0px) translateZ(56px);
	-webkit-transform: rotatex(90deg) translateX(0px) translateY(0px) translateZ(56px);
	background-color: #ff0000;
	}
	#side2 {
	transform: rotateY(-90deg) translateX(0px) translateY(0px) translateZ(56px);
	-moz-transform: rotateY(-90deg) translateX(0px) translateY(0px) translateZ(56px);
	-webkit-transform: rotateY(-90deg) translateX(0px) translateY(0px) translateZ(56px);
	background-color: #4d0000;
	}
	#side3 {
	transform: translateX(0px) translateY(0px) translateZ(56px);
	-moz-transform: translateX(0px) translateY(0px) translateZ(56px);
	-webkit-transform: translateX(0px) translateY(0px) translateZ(56px);
	background-color: #006600;
	}
	#side4 {
	transform: rotateY(90deg) translateX(0px) translateY(0px) translateZ(56px);
	-moz-transform: rotateY(90deg) translateX(0px) translateY(0px) translateZ(56px);
	-webkit-transform: rotateY(90deg) translateX(0px) translateY(0px) translateZ(56px);
	background-color: #000066;
	}
	#side5 {
	transform: rotateY(180deg) translateX(0px) translateY(0px) translateZ(56px);
	-moz-transform: rotateY(180deg) translateX(0px) translateY(0px) translateZ(56px);
	-webkit-transform: rotateY(180deg) translateX(0px) translateY(0px) translateZ(56px);
	background-color: #602020;
	}
	#side6 {
	transform: rotateX(-90deg) translateX(0px) translateY(0px) translateZ(56px);
	-moz-transform: rotateX(-90deg) translateX(0px) translateY(0px) translateZ(56px);
	-webkit-transform: rotateX(-90deg) translateX(0px) translateY(0px) translateZ(56px);
	background-color: #3399ff;
	}
	</style>
	</head>

	<body>
	<div id="wrapD3Cube">
	<div id="D3Cube">
	<div id="side1"></div>
	<div id="side2"></div>
	<div id="side3"></div>
	<div id="side4"></div>
	<div id="side5"></div>
	<div id="side6"></div>
	</div>
	</div>
	<p style="text-align: center;">
	<a onclick="turnLeft()">Left</a>
	<a onclick="turnRight()">Right</a> <br />
	<a onclick="flipCube()">Flip</a>
	</p>
	</body>

	<script>
	var cubex = -22, // initial rotation
	cubey = -38,
	cubez = 0;
	function rotate(variableName, degrees) {
	window[variableName] = window[variableName] + degrees;
	rotCube(cubex, cubey, cubez);
	}
	function rotCube(degx, degy, degz){
	segs = "rotateX("+degx+"deg) rotateY("+degy+"deg) rotateZ("+degz+"deg) translateX(0) translateY(0) translateZ(0)";
	$('#D3Cube').css({"transform":segs});
	}
	function turnRight() {
	rotate("cubey", 90);
	}
	function turnLeft() {
	rotate("cubey", -90);
	}
	function flipCube() {
	rotate("cubez", -180);
	}
	</script>

	</html>

Result

PHP JavaScript

Animated 3D Cube Using HTML CSS JAVASCRIPT

Labels

Popular Posts