JQuery + CSS3 realize 3D cube rotation effect _ jquery

This article mainly introduces jQuery combined with CSS3 to create 3D cube Rotation effects. When switching images, it presents 3D 3D 3D image gallery special effects, for more information about how to use jQuery + CSS3 to achieve 3D cube rotation, see:

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.

  
  
 
  
 
  
   
  
 
  
   
  
 
  
   
  
 
  
   
  
 
 
  
 
 
  
 
  
 
 
   
  
Image 1
 
   
  
Image 2
 
   
  
Image 3
 
   
  
Image 4
 
  
 
 
  
Click the button above to switch the image
 

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.