今天小编跟大家讲解下有关css3实现3d旋转动画特效 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关css3实现3d旋转动画特效 的相关资料，希望小伙伴们看了有所帮助。
复制代码代码如下:<!doctype html><html><head><meta charset="utf-8"><title>css3 3d动画 keyframes</title></head><body><style> @-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); } } .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 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); } .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); } .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动画。希望大家能够喜欢。
来源：爱蒂网
