jQuery CSS3 realizes 3D cube rotation effect

jQuery CSS3 realizes 3D cube rotation effect_jquery

WBOY

Release： 2016-05-16 15:32:50

Original

2034 people have browsed it

This article introduces how to use jQuery CSS3 to achieve a 3D cube rotation effect. Take a look at the rendering first:

During the process of switching pictures, the picture will rotate:

HTML structure
The picture list and navigation button of the 3D picture gallery are made using two unordered lists respectively.

<section>
 <div id="css3dimageslider" class="transparency">
 <ul>
  <li> <img src="img/css3dimg1.jpg"> </li>
  <li> <img src="img/css3dimg2.jpg"> </li>
  <li> <img src="img/css3dimg3.jpg"> </li>
  <li> <img src="img/css3dimg4.jpg"> </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">点击上面的按钮切换图片</p>
</section>

Copy after login

CSS style
In order to create a 3D perspective effect, you need to set the perspective attribute on the #css3dimageslider element, and set transform-style: preserve-3d; on the unordered list element inside it. Since IE browser does not support this attribute, so in IE browser The effect is not visible in the device. Next, select each list item separately through the :nth-child selector, and 3D transform them through the translateZ and rotateY attributes 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;
}

Copy after login

JavaScript

Finally, in the jQuery code, when the button is clicked, the rotateY attribute of the corresponding #css3dimageslider ul element is used to rotate the element and add an .active class 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>

Copy after login

The above is the key code sharing of jQuery combined with CSS3 to create a 3D cube rotation effect. I hope it will be helpful to everyone's learning.