HTML5源码网 - 最专业的HTML5模板设计、免费HTML5模板、整站HTML5网站提供商

服务项目 关于我们 联系我们 模板定制 怎么付款

专业的HTML5模板开发商 -HTML5模板网

HTML5模板 > 网站教程 > css3教程 > jQuery+CSS3制作转动的3D立方体动画实例
栏目分类
意见反馈

可以将问题或建议反馈给我们。

提交在线反馈
热点内容

jQuery+CSS3制作转动的3D立方体动画实例

html5模板 html5模板网(www.html5code.net) 2015-09-08 23:52 浏览次数:

CSS3动画实例--jQuery+CSS3制作转动的3D立方体动画实例,该实例引用了jQuery v2.0.0插件以及velocity.min.js插件。主要应用了CSS3中transform属性。

 

CSS代码:

body {
background-image:radial-gradient(circle, #fff, #333 90%);
perspective:800px;
}

.box {
margin:4em auto;
width:10em;
height:10em;
transform-style:preserve-3d;
transform-origin:50% 50% -5em;
position:relative;
transform:rotateX(-45deg);
}

.box div {
position:absolute;
width:10em;
height:10em;
background-color:#4c4c4c;
transform-style:preserve-3d;
backface-visibility:hidden;
}

.boxCorner2 {
transform:rotateX(180deg) translateZ(10em);
}

.boxCorner1::before, .boxCorner1::after, .boxCorner2::before, .boxCorner2::after {
position:absolute;
content:'';
display:block;
width:100%;
height:100%;
transform-style:preserve-3d;
}

.boxCorner1::before, .boxCorner2::before {
transform:rotateY(90deg);
transform-origin:0 50%;
background-color:#444;
}

.boxCorner2::before {
transform-origin:100% 50%;
transform:rotateY(-90deg);
}

.boxCorner1::after, .boxCorner2::after {
transform:rotateX(-90deg);
transform-origin:50% 0;
background-color:#555;
}

 

HTML代码:

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<!-- js引用包 -->
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src='//cdn.jsdelivr.net/velocity/1.0.0/velocity.min.js'></script>
</head>
<body>
<div class="box">
<div class="boxCorner1"></div>
<div class="boxCorner2"></div>
</div>
</body>
</html>

 

JS代码:

$('.box').velocity({
rotateX: '360deg',
rotateY: '360deg'
},{
duration:2000,
loop:true,
easing:'linear'
});

运行代码:


<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<style type="text/css">
body { background-image: radial-gradient(circle, #fff, #333 90%); perspective: 800px; }
.box { margin: 4em auto; width: 10em; height: 10em; transform-style: preserve-3d; transform-origin: 50% 50% -5em; position: relative; transform: rotateX(-45deg); }
.box div { position: absolute; width: 10em; height: 10em; background-color: #4c4c4c; transform-style: preserve-3d; backface-visibility: hidden; }
.boxCorner2 { transform: rotateX(180deg) translateZ(10em); }
.boxCorner1::before, .boxCorner1::after, .boxCorner2::before, .boxCorner2::after { position: absolute; content: ''; display: block; width: 100%; height: 100%; transform-style: preserve-3d; }
.boxCorner1::before, .boxCorner2::before { transform: rotateY(90deg); transform-origin: 0 50%; background-color: #444; }
.boxCorner2::before { transform-origin: 100% 50%; transform: rotateY(-90deg); }
.boxCorner1::after, .boxCorner2::after { transform: rotateX(-90deg); transform-origin: 50% 0; background-color: #555; }
</style>
<!-- js引用包 -->
<script src="http://www.internetke.com/public/js/jquery.min.js"></script>
<script src="http://www.internetke.com/public/js/velocity.min.js"></script>
</head>
<body>
<div class="box">
<div class="boxCorner1"></div>
<div class="boxCorner2"></div>
</div>
<script language="javascript">
$('.box').velocity({
rotateX: '360deg',
rotateY: '360deg'
},{
duration:2000,
loop:true,
easing:'linear'
});
</script>
</body>
</html>
 

转载请注明:html5模板网(最专业的html5模板定制开发资源站)

以下模板您可能也喜欢


Copyright © 2012-2014 WWW.HTML5CODE.NET. HTML模板网 版权所有并保留所有权 粤ICP备13013007号-4

最专业的html5模板设计、html5网站二次开发、html5源码网-感谢织梦系统提供强大网站内核支持