首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 HTML / CSS

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

css3实现3d旋转动画特效

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

HTML / CSS 相关文章推荐
CSS3教程(10):CSS3 HSL声明设置颜色
Apr 02 HTML / CSS
让IE6支持css3，让 IE7、IE8 都支持CSS3
Oct 09 HTML / CSS
浅析rem和em和px vh vw和% 移动端长度单位
Apr 28 HTML / CSS
CSS3模拟IOS滑动开关效果
Sep 28 HTML / CSS
css3边框_动力节点Java学院整理
Jul 11 HTML / CSS
用CSS3实现瀑布流布局的示例代码
Nov 10 HTML / CSS
CSS实现进度条和订单进度条的示例
Nov 05 HTML / CSS
html5中为audio标签增加停止按钮动作实现方法
Jan 04 HTML / CSS
关于老式浏览器兼容HTML5和CSS3的问题
Jun 01 HTML / CSS
浅谈HTML5 &amp; CSS3的新交互特性
Jul 19 HTML / CSS
canvas学习总结三之绘制路径-线段
Jan 31 HTML / CSS
CSS实现fullpage.js全屏滚动效果的示例代码
Mar 24 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
RTX 3050 ti(1) webpack(1) calc(1) SandBox(1) cudn(1) cudnn(1) Git(3) K8s(1) OpenFeign(1) swing(1)
You might like
escape unescape的php下的实现方法
2007/04/27 PHP
ThinkPHP的RBAC(基于角色权限控制)深入解析
2013/06/17 PHP
php之Smarty模板使用方法示例详解
2014/07/08 PHP
PHP实现驼峰样式字符串(首字母大写)转换成下划线样式字符串的方法示例
2017/08/10 PHP
php实现支持中文的文件下载功能示例
2017/08/30 PHP
前端开发部分总结[兼容性、DOM操作、跨域等]（持续更新）
2010/03/04 Javascript
JS实现定时页面弹出类似QQ新闻的提示框
2013/11/07 Javascript
javascript中数组的冒泡排序使用示例
2013/12/18 Javascript
Jquery中&quot;$(document).ready(function(){ })&quot;函数的使用详解
2013/12/30 Javascript
JavaScript中数据结构与算法(四)：串(BF)
2015/06/19 Javascript
JQuery在循环中绑定事件的问题详解
2016/06/02 Javascript
js利用appendChild对标签进行排序的实现方法
2016/10/16 Javascript
JavaScript之WebSocket技术详解
2016/11/18 Javascript
vue中遇到的坑之变化检测问题（数组相关）
2017/10/13 Javascript
jQuery+ajax实现动态添加表格tr td功能示例
2018/04/23 jQuery
使用Vue实现图片上传的三种方式
2018/07/17 Javascript
原生JS实现简单的无缝自动轮播效果
2018/09/26 Javascript
详解vscode中vue代码颜色插件
2018/10/11 Javascript
layui关闭弹窗后刷新主页面和当前更改项的例子
2019/09/06 Javascript
Javascript confirm多种使用方法解析
2020/09/25 Javascript
JavaScript实现网页tab栏效果制作
2020/11/20 Javascript
python操作列表的函数使用代码详解
2017/12/28 Python
Ubuntu下使用python读取doc和docx文档的内容方法
2018/05/08 Python
python进行文件对比的方法
2018/12/24 Python
Python从函数参数类型引出元组实例分析
2019/05/28 Python
用python打印1~20的整数实例讲解
2019/07/01 Python
python 字典的打印实现
2019/09/26 Python
解决python cv2.imread 读取中文路径的图片返回为None的问题
2020/06/02 Python
HTML5新增加标签和功能概述
2016/09/05 HTML / CSS
抽象方法、抽象类怎样声明
2014/10/25 面试题
什么是抽象
2015/12/13 面试题
《跨越百年的美丽》教学反思
2014/02/11 职场文书
红色经典观后感
2015/06/18 职场文书
2016优秀教师先进个人事迹材料
2016/02/25 职场文书
Mysql8.0递归查询的简单用法示例
2021/08/04 MySQL
python实现学员管理系统(面向对象版)
2022/06/05 Python