CSS3動畫實例--jQuery+CSS3制作轉(zhuǎn)動的3D立方體動畫實例，該實例引用了jQuery v2.0.0插件以及velocity.min.js插件。主要應(yīng)用了CSS3中transform屬性。 CSS代碼： body { background-image:radial-gradient(circle, #
CSS3動畫實例--jQuery+CSS3制作轉(zhuǎn)動的3D立方體動畫實例，該實例引用了jQuery v2.0.0插件以及velocity.min.js插件。主要應(yīng)用了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>
【網(wǎng)站聲明】本站除付費源碼經(jīng)過測試外，其他素材未做測試，不保證完整性，網(wǎng)站上部分源碼僅限學(xué)習(xí)交流，請勿用于商業(yè)用途。如損害你的權(quán)益請聯(lián)系客服QQ：2655101040 給予處理，謝謝支持。
