欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

css3实现3d旋转动画特效

程序员文章站 2022-06-26 10:20:17
这篇文章主要介绍了css3实现3d旋转动画特效,使用CSS3实现了3d立方体的左旋转,右旋转,上下旋转等效果,十分实用,有需要的小伙伴来参考下吧... 15-03-10...

css3实现3d旋转动画特效



复制代码
代码如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>css3 3d动画 keyframes</title>
</head>
<body>
<style>/*************** animations ***************/
@-webkit-keyframes spin {
from { -webkit-transform: rotatey(0); }
to { -webkit-transform: rotatey(360deg); }
}
@-ms-keyframes spin {
from { ms-transform: rotatey(0); }
to { ms-transform: rotatey(360deg); }
}
@keyframes spin {
from { transform: rotatey(0); }
to { transform: rotatey(360deg); }
}
@-webkit-keyframes spin-vertical {
from { -webkit-transform: rotatex(0); }
to { -webkit-transform: rotatex(-360deg); }
}
@-ms-keyframes spin-vertical {
from { ms-transform: rotatex(0); }
to { ms-transform: rotatex(-360deg); }
}
@keyframes spin-vertical {
from { transform: rotatex(0); }
to { transform: rotatex(-360deg); }
}
/*************** standard cube ***************/
.cube-wrap {
-webkit-perspective: 800px;
-webkit-perspective-origin: 50% 100px;
-moz-perspective: 800px;
-moz-perspective-origin: 50% 100px;
-ms-perspective: 800px;
-ms-perspective-origin: 50% 100px;
perspective: 800px;
perspective-origin: 50% 100px;
}
.cube {
position: relative;
width: 200px;
margin: 0 auto;
-webkit-transform-style: preserve-3d;
-webkit-animation: spin 5s infinite linear;
-moz-transform-style: preserve-3d;
-moz-animation: spin 5s infinite linear;
-ms-transform-style: preserve-3d;
-ms-animation: spin 5s infinite linear;
transform-style: preserve-3d;
animation: spin 5s infinite linear;
}
.cube div {
position: absolute;
width: 200px;
height: 200px;
background: rgba(255,255,255,0.1);
box-shadow: inset 0 0 30px rgba(125,125,125,0.8);
font-size: 20px;
text-align: center;
line-height: 200px;
color: rgba(0,0,0,0.5);
font-family: sans-serif;
text-transform: uppercase;
}
/*************** depth cube ***************/
.depth div.back-pane {
-webkit-transform: translatez(-100px) rotatey(180deg);
-moz-transform: translatez(-100px) rotatey(180deg);
-ms-transform: translatez(-100px) rotatey(180deg);
transform: translatez(-100px) rotatey(180deg);
}
.depth div.right-pane {
-webkit-transform:rotatey(-270deg) translatex(100px);
-webkit-transform-origin: top right;
-moz-transform:rotatey(-270deg) translatex(100px);
-moz-transform-origin: top right;
-ms-transform:rotatey(-270deg) translatex(100px);
-ms-transform-origin: top right;
transform:rotatey(-270deg) translatex(100px);
transform-origin: top right;
}
.depth div.left-pane {
-webkit-transform:rotatey(270deg) translatex(-100px);
-webkit-transform-origin: center left;
-moz-transform:rotatey(270deg) translatex(-100px);
-moz-transform-origin: center left;
-ms-transform:rotatey(270deg) translatex(-100px);
-ms-transform-origin: center left;
transform:rotatey(270deg) translatex(-100px);
transform-origin: center left;
}
.depth div.top-pane {
-webkit-transform:rotatex(-90deg) translatey(-100px);
-webkit-transform-origin: top center;
-moz-transform:rotatex(-90deg) translatey(-100px);
-moz-transform-origin: top center;
-ms-transform:rotatex(-90deg) translatey(-100px);
-ms-transform-origin: top center;
transform:rotatex(-90deg) translatey(-100px);
transform-origin: top center;
}
.depth div.bottom-pane {
-webkit-transform:rotatex(90deg) translatey(100px);
-webkit-transform-origin: bottom center;
-moz-transform:rotatex(90deg) translatey(100px);
-moz-transform-origin: bottom center;
-ms-transform:rotatex(90deg) translatey(100px);
-ms-transform-origin: bottom center;
transform:rotatex(90deg) translatey(100px);
transform-origin: bottom center;
}
.depth div.front-pane {
-webkit-transform: translatez(100px);
-moz-transform: translatez(100px);
-ms-transform: translatez(100px);
transform: translatez(100px);
}
/*************** vertical spinning cube ***************/
.cube-wrap.vertical .cube {
-webkit-transform-origin: 0 100px;
-moz-transform-origin: 0 100px;
-ms-transform-origin: 0 100px;
transform-origin: 0 100px;
-webkit-animation: spin-vertical 5s infinite linear;
-moz-animation: spin-vertical 5s infinite linear;
-ms-animation: spin-vertical 5s infinite linear;
animation: spin-vertical 5s infinite linear;
}
.cube-wrap.vertical .depth div.top-pane {
-webkit-transform:rotatex(-270deg) translatey(-100px);
-moz-transform:rotatex(-270deg) translatey(-100px);
-ms-transform:rotatex(-270deg) translatey(-100px);
transform:rotatex(-270deg) translatey(-100px);
}
.cube-wrap.vertical .depth div.back-pane {
-webkit-transform: translatez(-100px) rotatex(180deg);
-moz-transform: translatez(-100px) rotatex(180deg);
-ms-transform: translatez(-100px) rotatex(180deg);
transform: translatez(-100px) rotatex(180deg);
}
.cube-wrap.vertical .depth div.bottom-pane {
-webkit-transform: rotatex(-90deg) translatey(100px);
-moz-transform: rotatex(-90deg) translatey(100px);
-ms-transform: rotatex(-90deg) translatey(100px);
transform: rotatex(-90deg) translatey(100px);
}
/*************** flat spinning cube ***************/
.cube-wrap.flat {
-webkit-perspective: none;
-webkit-perspective-origin: 0 0;
-moz-perspective: none;
-moz-perspective-origin: 0 0;
-ms-perspective: none;
-ms-perspective-origin: 0 0;
perspective: none;
perspective-origin: 0 0;
}</style>
<div style="height: 300px; margin-top: 45px; float:left; width:400px;">
<div class="cube-wrap">
<div class="cube depth">
<div class="front-pane">前</div>
<div class="back-pane">后</div>
<div class="top-pane">上</div>
<div class="bottom-pane">bottom</div>
<div class="left-pane">左</div>
<div class="right-pane">右</div>
</div>
</div>
</div>
<div style="height: 300px; margin-top: 60px;float:left;width:400px;">
<div class="cube-wrap vertical">
<div class="cube depth">
<div class="front-pane">前</div>
<div class="back-pane">后</div>
<div class="top-pane">上</div>
<div class="bottom-pane">bottom</div>
<div class="left-pane">左</div>
<div class="right-pane">右</div>
</div>
</div>
</div>
<div style="height: 300px; margin-top: 60px;float:left;width:400px;">
<div class="cube-wrap flat">
<div class="cube depth">
<div class="front-pane">前</div>
<div class="back-pane">后</div>
<div class="top-pane">上</div>
<div class="bottom-pane">bottom</div>
<div class="left-pane">左</div>
<div class="right-pane">右</div>
</div>
</div>
</div>
</body>
</html>

本css3特效主要使用的是transform属性实现,它是“变型”的意思,值主要包括:旋转rotate,扭曲skew,缩放scale,移动translate以及矩阵变形matrix 。通过这个实例,你将会学会如何使用它实现css3 3d动画。希望大家能够喜欢。