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 相关文章推荐
CSS3教程:边框属性border的极致应用
Apr 02 HTML / CSS
CSS3实现多背景展示效果通过CSS3定位多张背景
Aug 10 HTML / CSS
CSS中垂直居中的简单实现方法
Jul 06 HTML / CSS
CSS3中的clip-path使用攻略
Aug 03 HTML / CSS
基于CSS3实现图片模糊过滤效果
Nov 19 HTML / CSS
Grid 宫格常用布局的实现
Jan 10 HTML / CSS
css3实现简单的白云飘动背景特效
Oct 28 HTML / CSS
详解移动端HTML5音频与视频问题及解决方案
Aug 22 HTML / CSS
HTML5组件Canvas实现图像灰度化(步骤+实例效果)
Apr 22 HTML / CSS
让IE下支持Html5的placeholder属性的插件
Sep 02 HTML / CSS
解析CSS 提取图片主题色功能(小技巧)
May 12 HTML / CSS
在CSS中使用when/else的方法
Jan 18 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
《魔兽争霸3》重制版究竟重制了什么?玩家:这么糊弄真的好吗?
2020/05/04 魔兽争霸
php下载excel无法打开的解决方法
2013/12/24 PHP
PHP5.6.8连接SQL Server 2008 R2数据库常用技巧分析总结
2019/05/06 PHP
javascript IE中的DOM ready应用技巧
2008/07/23 Javascript
AJAX的跨域与JSONP(为文章自动添加短址的功能)
2010/01/17 Javascript
js使用Array.prototype.sort()对数组对象排序的方法
2015/01/28 Javascript
Javascript中的包装类型介绍
2015/04/02 Javascript
JavaScript tab选项卡插件实例代码
2016/02/23 Javascript
详解javascript立即执行函数表达式IIFE
2017/02/13 Javascript
基于Nodejs利用socket.io实现多人聊天室
2017/02/22 NodeJs
微信小程序 定位到当前城市实现实例代码
2017/02/23 Javascript
canvas绘制一个常用的emoji表情
2017/03/30 Javascript
Bootstrap fileinput文件上传组件使用详解
2017/06/06 Javascript
LayUI表格批量删除方法
2018/08/15 Javascript
vue同步父子组件和异步父子组件的生命周期顺序问题
2018/10/07 Javascript
Vue3.0数据响应式原理详解
2019/10/09 Javascript
Vue仿百度搜索功能
2020/12/28 Vue.js
Python实现的一个简单LRU cache
2014/09/26 Python
利用Python获取操作系统信息实例
2016/09/02 Python
Python时间获取及转换知识汇总
2017/01/11 Python
浅谈flask中的before_request与after_request
2018/01/20 Python
Python面向对象class类属性及子类用法分析
2018/02/02 Python
Python基于whois模块简单识别网站域名及所有者的方法
2018/04/23 Python
对numpy.append()里的axis的用法详解
2018/06/28 Python
深入理解Python异常处理的哲学
2019/02/01 Python
Python爬取智联招聘数据分析师岗位相关信息的方法
2019/08/13 Python
关于Numpy数据类型对象(dtype)使用详解
2019/11/27 Python
如何设置PyCharm中的Python代码模版(推荐)
2020/11/20 Python
五个2015 年最佳HTML5 框架
2015/11/11 HTML / CSS
Foot Locker德国官方网站:美国运动服和鞋类零售商
2018/11/01 全球购物
个人简历自我评价
2014/01/06 职场文书
就业协议书怎么填
2014/09/15 职场文书
趣味运动会开幕词
2015/01/28 职场文书
2016暑期社会实践新闻稿
2015/11/25 职场文书
土木工程生产实习心得体会
2016/01/22 职场文书
python画条形图的具体代码
2022/04/20 Python