JQUERY+CSS3 realizes 3D cube rotation effect _jquery

This paper describes how to use JQUERY+CSS3 to achieve 3D cube rotation effect, first look at the effect chart:

In the process of switching pictures, the pictures rotate:

HTML structure
The 3D picture gallery's picture list and navigation buttons are made using two unordered lists, respectively.

<section>
 <div id= "Css3dimageslider" class= "transparency" >
 <ul>
  <li>  </li>
  <li>  </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
 </ul>
 <p id= "css3dtransparency" class= "active" > click on the button above to switch pictures </p>
</section >

CSS style
to make a 3D perspective, you need to set the perspective Pivot property on the #css3dimageslider element. and set the transform-style:preserve-3d on the unordered list element in it, because IE browser does not support this property, so it is not visible in IE browser. The next step is to select each list item by the Nth-child selector, and 3D conversion of the Translatez and Rotatey properties to form a 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 the button is clicked the corresponding #css3dimageslider UL element's Rotatey attribute, is the device rotates, and adds one to it. Active class.

<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 jquery combined with CSS3 to make 3D cube rotation effect of the key code sharing, hope to help you learn.