CSS3 Transform

Transform 3D

box1

css

#ex1 {
	padding:5px;
	color:#fff;
	background:-webkit-linear-gradient(top, #f00, #fff);
	background:-moz-linear-gradient(top, #f00, #fff);
	border-radius:5px;
	width:200px;
	height:200px;
	margin:10px auto;
	-moz-transform: rotateX(45deg) rotateY(45deg);
	-webkit-transform: rotateX(45deg) rotateY(45deg);

	-moz-transition: -moz-transform .5s ease-out 0s;
	-webkit-transition: -webkit-transform .5s ease-out 0s;
}
#ex1.transition1 {
	-moz-transform: rotateX(0deg) rotateY(0deg);
	-webkit-transform: rotateX(0deg) rotateY(0deg);
}

javascript

function execute() {
	var ex1 = $("#ex1")
	if ($("#ex1").hasClass("transition1")) {
		$("#ex1").removeClass("transition1")
	} else {
		$("#ex1").addClass("transition1")
	}
}