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")
}
}