<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS3 3D立方体扭曲动画 - 网页模板</title>
<style>
html, body {
height: 100%;
}
body {
overflow: hidden;
margin: 0;
perspective: 10em;
animation: view 2s ease-in infinite alternate;
}
.cube {
transform-style: preserve-3d;
transform: rotateX(-35deg) rotateY(35deg);
}
.cube, .cube * {
box-sizing: border-box;
position: absolute;
top: 50%;
left: 50%;
}
.face {
margin: -5em;
border: solid .25em;
width: 10em;
height: 10em;
}
.face:nth-child(1) {
transform: rotateY(0deg) translateZ(5em);
background: rgba(255, 102, 102, 0.75);
}
.face:nth-child(2) {
transform: rotateY(90deg) translateZ(5em);
background: rgba(179, 255, 102, 0.75);
}
.face:nth-child(3) {
transform: rotateY(180deg) translateZ(5em);
background: rgba(102, 255, 255, 0.75);
}
.face:nth-child(4) {
transform: rotateY(270deg) translateZ(5em);
background: rgba(178, 102, 255, 0.75);
}
@keyframes view {
to {
perspective: 100em;
}
}
</style>
<script src="js/prefixfree.min.js"></script>
</head>
<body>
<div class='cube'>
<div class='face'></div>
<div class='face'></div>
<div class='face'></div>
<div class='face'></div>
</div>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
<p>来源：<a href="http://www.moobnn.com/" target="_blank">网页模板</a></p>
</div>
</body>
</html>
