3d立方体旋转特效

最新推荐文章于 2025-03-05 11:48:21 发布

Mu_Yo_O

最新推荐文章于 2025-03-05 11:48:21 发布

阅读量346

点赞数

文章标签： jquery html5 javascript css html

本文链接：https://blog.youkuaiyun.com/m0_62098435/article/details/120469221

版权

该教程介绍了如何利用jQuery、CSS3和GSAP库实现一个3D旋转立方体的视觉效果。虽然IE浏览器不支持某些3D转换，但在其他现代浏览器中，这个特效能够完美展示。通过引入必要的JS库和设置CSS样式，可以创建一个包含六个面的立方体，并通过JavaScript控制其旋转动画。当鼠标悬停在立方体的各个面上时，还会触发不同的透明度变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这是一款使用jquery和CSS3制作的3D旋转立方体特效。该特效使用GSAP来制作动画，通过CSS transform来制作立方体效果兼容除IE之外的其它现代浏览器。

由于IE浏览器不支持transform-style:preserve3d，所以在IE中看到的不是立方体效果，而是平面效果。

使用方法

在页面中引入jquery和TweenMax.min.js文件。

<script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.11.0.min.js"><\/script>')</script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js'></script>
<script type="text/javascript" src="js/index.js"></script>

HTML结构

3D立方体的HTML结构如下：

<div id="trans3DDemo1">
		  <div id="trans3DBoxes1">
		      <div>Front</div>
		      <div>Left</div>
		      <div>Right</div>
		      <div>Top</div>
		      <div>Bottom</div>
		      <div>Back</div>
		  </div>
	</div>

CSS样式

为立方体添加如下的CSS样式：

#trans3DDemo1 {
	position:relative;
	display:inline-block;
	width:250px;
	height:250px;
	top:0px;
	/*top:250px;
	margin:0px auto 0px auto;*/
}

#trans3DBoxes1 div {
	position:absolute;
	width:248px;
	height:248px;
	padding:0;
	margin:0;
	background:url(../img/qq.jpg);
	background-size: 100% 100%;
	border:solid 2px #FFF;
	display:block;
	text-align:center;
	font-size:36px;
	font-weight:bold;
}

JavaScript

在页面DOM元素加载完毕之后，通过下面的方法来初始化该立方体效果：

var trans3DDemo1 = $("#trans3DDemo1"), 
    trans3DBoxes1 = $("#trans3DBoxes1"),
    boxes1 = $("#trans3DBoxes1 div"),
    threeDTimeline = new TimelineMax({onUpdate:updateCube, repeat:-1}),
	stageW = ($(window).width())/2,
	stageH = ($(window).height())/2,
	stageX = (stageW-(trans3DBoxes1.width()/2)),
	stageY = (stageH-(250/2));

TweenMax.set(trans3DBoxes1, {css:{transformPerspective:3000, transformStyle:"preserve-3d"}}); 

threeDTimeline.set(boxes1[0], {rotationX:0, rotationY:0, x:0, y:0, z:125, opacity:10})
              .set(boxes1[1], {rotationX:0, rotationY:-90, x:-125, y:0, z:0, opacity:10})
			  .set(boxes1[2], {rotationX:0, rotationY:90, x:125, y:0, z:0, opacity:10})
			  .set(boxes1[3], {rotationX:90, rotationY:0, x:0, y:-125, z:0, opacity:10})
			  .set(boxes1[4], {rotationX:-90, rotationY:0, x:0, y:125, z:0, opacity:10})
			  .set(boxes1[5], {rotationX:0, rotationY:180, x:0, y:0, z:-125, opacity:10})
			  .set(trans3DBoxes1, {x:150, y:150, transformOrigin:"125px 125px 0px"});

boxes1.each(function (index, element) {
			$(element).hover(over, out);
			function over(){
				TweenMax.to(element, 0.15, {opacity:0.33});
				//threeDTimeline.pause();
			}
			function out(){
				TweenMax.to(element, 0.15, {opacity:0.85});
				//threeDTimeline.play();
			}
});

//
threeDTimeline.to(trans3DBoxes1, 15, {css:{rotationY:360, rotationX:-720, transformOrigin:"125px 125px 0px"}, ease:Power0.easeNone});
//
function updateCube(){
	stageW = ($(window).width())/2;
	stageH = ($(window).height())/2;
	stageX = (stageW-(trans3DBoxes1.width()/2));
	stageY = (stageH-(250/2));
	TweenMax.to(trans3DBoxes1, 1, {css:{x:stageX, y:stageY}});
}