JQuery + CSS3 achieves 3D cube rotation, jquerycss3

JQuery + CSS3 achieves 3D cube rotation, jquerycss3

This article describes how to use jQuery + CSS3 to implement 3D cube rotation. Let's take a look:

When switching an image, the image is rotated:

HTML Structure
The image list and navigation buttons of the 3D image gallery are created using two Unordered Lists.

<Section> <div id = "css3dimageslider" class = "transparency"> <ul> <li>  </li>  </li>  </li>  </li> </ul> </div> <ul id =" css3dimagePager "> <li class =" active "> Image 1 </li> <li> image 2 </li> <li> Image 3 </li> <li> Image 4 </li> </ul> <p id = "css3dtransparency" class = "active"> click the button above to switch the image </p> </section>

CSS style
To create a 3D perspective effect, you need to set the perspective attribute on the # css3dimageslider element and set the transform-style: preserve-3d on the unordered list element in it ;, because IE does not support this attribute, it cannot be seen in IE. Next, select each list item through the nth-child selector, and perform 3D conversion on them through the translateZ and rotateY attributes to form the cube effect.

 #css3dimagePager, #css3dtransparency { text-align: center; position: relative; z-index: 11; padding: 0 0 10px; margin: 0;}#css3dimagePager li { padding-right: 2em; display: inline-block; cursor: pointer;}#css3dimagePager li.active, #css3dtransparency.active { font-weight: bold;}#css3dimageslider { -webkit-perspective: 800; -moz-perspective: 800px; -ms-perspective: 800; perspective: 800; -webkit-perspective-origin: 50% 100px; -moz-perspective-origin: 50% 100px; -ms-perspective-origin: 50% 100px; perspective-origin: 50% 100px; margin: 100px auto 20px auto; width: 450px; height: 400px;}#css3dimageslider ul { position: relative; margin: 0 auto; height: 281px; width: 450px; list-style: none; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform-origin: 50% 100px 0; -moz-transform-origin: 50% 100px 0; -ms-transform-origin: 50% 100px 0; transform-origin: 50% 100px 0; -webkit-transition: all 1.0s ease-in-out; -moz-transition: all 1.0s ease-in-out; -ms-transition: all 1.0s ease-in-out; transition: all 1.0s ease-in-out;}#css3dimageslider ul li { position: absolute; height: 281px; width: 450px; padding: 0px;}#css3dimageslider ul li:nth-child(1) { -webkit-transform: translateZ(225px); -moz-transform: translateZ(225px); -ms-transform: translateZ(225px); transform: translateZ(225px);}#css3dimageslider ul li:nth-child(2) { -webkit-transform: rotateY(90deg) translateZ(225px); -moz-transform: rotateY(90deg) translateZ(225px); -ms-transform: rotateY(90deg) translateZ(225px); transform: rotateY(90deg) translateZ(225px);}#css3dimageslider ul li:nth-child(3) { -webkit-transform: rotateY(180deg) translateZ(225px); -moz-transform: rotateY(180deg) translateZ(225px); -ms-transform: rotateY(180deg) translateZ(225px); transform: rotateY(180deg) translateZ(225px);}#css3dimageslider ul li:nth-child(4) { -webkit-transform: rotateY(-90deg) translateZ(225px); -moz-transform: rotateY(-90deg) translateZ(225px); -ms-transform: rotateY(-90deg) translateZ(225px); transform: rotateY(-90deg) translateZ(225px);}#css3dimageslider.transparency img { opacity: 0.7;} 

JavaScript

Finally, in the jQuery code, When you click the button, the corresponding rotateY attribute of the # css3dimageslider ul element is a rotator and A. active class is added to it.

<script> $(document).ready(function() {  $("#css3dimagePager li").click(function(){ var rotateY = ($(this).index() * -90);  $("#css3dimageslider ul").css({"-webkit-transform":"rotateY("+rotateY+"deg)", "-moz-transform":"rotateY("+rotateY+"deg)", "-ms-transform":"rotateY("+rotateY+"deg)", "transform":"rotateY("+rotateY+"deg)"});  $("#css3dimagePager li").removeClass("active");  $(this).addClass("active"); });  $("#css3dtransparency").click(function() {  $("#css3dimageslider").toggleClass("transparency");  $(this).toggleClass("active"); });  });</script>      

The above is the key code for jQuery to use CSS3 to create a 3D cube rotation effect. I hope it will be helpful for you to learn.