css3实现3d旋转动画特效


Posted in HTML / CSS onMarch 10, 2015

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动画。希望大家能够喜欢。

HTML / CSS 相关文章推荐
HTML5和CSS3让网页设计提升到下一个高度
Aug 14 HTML / CSS
一款超酷的js+css3实现的3D标签云特效兼容ie7/8/9
Nov 18 HTML / CSS
纯CSS3发光分享按钮的实现教程
Sep 06 HTML / CSS
CSS3动画特效在活动页中的应用
Jan 21 HTML / CSS
如何使用css3实现一个类在线直播的队列动画的示例代码
Jun 17 HTML / CSS
Css3实现无缝滚动防抖
Sep 14 HTML / CSS
HTML5实现Notification API桌面通知功能
Mar 02 HTML / CSS
HTML5中FileReader接口使用方法实例详解
Aug 26 HTML / CSS
HTML5之SVG 2D入门4—笔画与填充
Jan 30 HTML / CSS
分享全球十款超强HTML5开发工具
May 14 HTML / CSS
阻止移动设备(手机、pad)浏览器双击放大网页的方法
Jun 03 HTML / CSS
用HTML5中的Canvas结合公式绘制粒子运动的教程
May 08 HTML / CSS
纯css3实现图片翻牌特效
Mar 10 #HTML / CSS
CSS3制作苹果风格键盘特效
Feb 26 #HTML / CSS
CSS3实现闪烁动画效果的方法
Feb 09 #HTML / CSS
CSS3使用transition实现的鼠标悬停淡入淡出
Jan 09 #HTML / CSS
一款基于css3和jquery实现的动画显示弹出层按钮教程
Jan 04 #HTML / CSS
一款利用html5和css3实现的3D滚动特效的教程
Jan 04 #HTML / CSS
一款基于css3的列表toggle特效实例教程
Jan 04 #HTML / CSS
You might like
CI框架封装的常用图像处理方法(缩略图,水印,旋转,上传等)
2016/11/22 PHP
php+redis消息队列实现抢购功能
2018/02/08 PHP
两个SUBMIT按钮,如何区分处理
2006/08/22 Javascript
基于javascript 闭包基础分享
2013/07/10 Javascript
包含中国城市的javascript对象实例
2015/08/03 Javascript
jqueryMobile 动态添加元素,展示刷新视图的实现方法
2016/05/28 Javascript
手机端实现Bootstrap简单图片轮播效果
2016/10/13 Javascript
使用开源工具制作网页验证码的方法
2016/10/17 Javascript
BootStrap与Select2使用小结
2017/02/17 Javascript
nodejs简单读写excel内容的方法示例
2018/03/16 NodeJs
Vue中computed与methods的区别详解
2018/03/24 Javascript
AngularJS自定义过滤器用法经典实例总结
2018/05/17 Javascript
微信小程序实现发送验证码按钮效果
2018/12/20 Javascript
Async/Await替代Promise的6个理由
2019/06/15 Javascript
JavaScript Window窗口对象属性和使用方法
2020/01/19 Javascript
node.js +mongdb实现登录功能
2020/06/18 Javascript
五句话帮你轻松搞定js原型链
2020/12/09 Javascript
[01:04:01]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS DT第一场
2014/05/24 DOTA
Python函数嵌套实例
2014/09/23 Python
Windows下PyMongo下载及安装教程
2015/04/27 Python
Python利用itchat对微信中好友数据实现简单分析的方法
2017/11/21 Python
python爬虫之自制英汉字典
2019/06/24 Python
通过实例解析Python RPC实现原理及方法
2020/07/07 Python
Django-celery-beat动态添加周期性任务实现过程解析
2020/11/26 Python
HTML5表格_动力节点Java学院整理
2017/07/11 HTML / CSS
AmazeUI 面板的实现示例
2020/08/17 HTML / CSS
斯凯奇美国官网:SKECHERS美国
2016/08/20 全球购物
加利福尼亚州威尼斯的女性奢侈品设计师服装和概念店:Mona Moore
2018/09/13 全球购物
工商企业管理应届生求职信
2013/11/03 职场文书
2014年最新学习全国两会精神心得
2014/03/17 职场文书
安全生产目标责任书
2014/04/14 职场文书
倡导文明标语
2014/06/16 职场文书
力学专业求职信
2014/07/23 职场文书
个人房屋买卖协议书(范本)
2014/10/04 职场文书
2015年考研复习计划
2015/01/19 职场文书
首次购房证明
2015/06/19 职场文书