您的位置:首页 - HTML5
CSS3立方体旋转

效果预览:http://keleyi.com/keleyi/phtml/css3/11.htm

另一个立方体旋转效果:http://keleyi.com/keleyi/phtml/css3/11a.htm

第一个效果代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3立方体旋转-柯乐义</title>
<style>
.cube {
margin:10em auto;
position: relative;
width: 5em; height: 5em;
-webkit-transform-style: preserve-3d;
-webkit-transform: rotateY(30deg) rotateX(10deg);
}
.face {
position: absolute;
width: 100%; height: 100%;
box-sizing: border-box;
border: solid .125em;
}
.cube--ani {
-webkit-animation: rot 4s linear infinite;
}
@-webkit-keyframes rot {
to { -webkit-transform: rotateY(-330deg) rotateX(370deg); }
}
.face:nth-child(1) {
-webkit-transform: /*rotateY(0deg)*/ translateZ(2.5em /* half the side length, 5em in this case */);
}
.face:nth-child(2) {
-webkit-transform: rotateY( 90deg) translateZ(2.5em);
}
.face:nth-child(3) {
-webkit-transform: rotateY(180deg) translateZ(2.5em);
}
.face:nth-child(4) {
-webkit-transform: rotateY(270deg) translateZ(2.5em);
}
</style>
</head>
<body>
请使用Chrome浏览器(支持CSS3)查看本效果。<a href="http://keleyi.com/a/bjad/5vw5k0au.htm" target="_blank">原文</a>
<div class='container container--realistic'>
<div class='cube cube--ani'>
<div class='face'>1</div>
<div class='face'>2</div>
<div class='face'>3</div>
<div class='face'>4</div>
</div>
</div>
</body>
</html>

本站导航
相关文章
柯乐义 Copyright© keleyi.com