本文介绍了如何利用jQuery+CSS3实现3D立方体旋转效果,先看一看效果图:

jQuery+CSS3实现3D立方体旋转效果

切换图片过程中,图片进行旋转:

jQuery+CSS3实现3D立方体旋转效果

HTML结构
3D图片画廊的图片列表和导航按钮分别使用两个无序列表来制作。

<section>
 <div id="css3dimageslider" class="transparency">
 <ul>
  <li> <img src="/UploadFiles/2021-04-02/css3dimg1.jpg">

CSS样式
为了制作3D透视效果,需要在#css3dimageslider元素上设置perspective 透视属性,并在它里面的无序列表元素上设置transform-style: preserve-3d;,由于IE浏览器不支持这个属性,所以在IE浏览器中是看不到效果的。接下来通过:nth-child选择器分别选择每一个列表项,并通过translateZ和rotateY属性对它们进行3D转换,形成立方体效果。

 #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

最后在jQuery代码中,在点击按钮的时候相应的#css3dimageslider ul元素的rotateY属性,是器旋转,并为其添加一个.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>      

以上就是jQuery结合CSS3来制作3D立方体旋转效果的关键代码分享,希望对大家学习有所帮助。

标签:
jquery,css3旋转,jquery,css3,动画

免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
狼山资源网 Copyright www.pvsay.com

评论“jQuery+CSS3实现3D立方体旋转效果”

暂无“jQuery+CSS3实现3D立方体旋转效果”评论...

P70系列延期,华为新旗舰将在下月发布

3月20日消息,近期博主@数码闲聊站 透露,原定三月份发布的华为新旗舰P70系列延期发布,预计4月份上市。

而博主@定焦数码 爆料,华为的P70系列在定位上已经超过了Mate60,成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢?

根据目前爆料的消息来看,华为P70系列将推出三个版本,其中P70和P70 Pro采用了三角形的摄像头模组设计,而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智,但辨识度绝对拉满。