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

时间：2015-09-08

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' />

<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>

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>

</head>

<body>

</div>

$('.box').velocity({

rotateX: '360deg',

rotateY: '360deg'

},{

duration:2000,

loop:true,

easing:'linear'

});

</script>

</body>

</html>

上一篇：CSS3 animation 属性实例应用 下一篇：纯javascript+CSS3制作精美时钟

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

相关文章

最新文章