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 3d旋转动画的更多相关文章

Css3 3D 旋转动画效果
需求: 1.一个列表滑动效果为360 旋转准备: 1.css 基础 2.Css 动画基础animation 3.transform-style概念 4 transform 概念 5 JavaScri ...
CSS3 3D旋转动画代码实例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
CSS3 3D旋转动画菜单
在线演示本地下载
CSS3 3D旋转下拉菜单--兼容性不太好
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
CSS3——3D旋转图（跑马灯效果图）
CSS3新增了很多新的属性,可以用很少的代码实现炫酷的动画效果,但由于兼容性各浏览器的能力存在不足,有特别需求的网站就呵呵啦.H5C3已是大势所趋了,之前看过一个新闻,Chrome将在年底全面转向H5 ...
css3制作旋转动画
现在的css3真是强大,之前很多动画都是用jq来实现,但是css3制作的动画要比jq实现起来简单很多,今天呢,我自己也写了一个css旋转动画和大家分享.效果如下面的图片思路:1.制作之前呢,我们先来 ...
3D旋转动画
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> < ...
8套迷人精致的CSS3 3D按钮动画
1.纯CSS3 3D按钮按钮酷似牛奶般剔透 CSS3按钮一般都可以设计的非常漂亮,利用投影.渐变等CSS3属性特效可以把按钮渲染的十分动感.今天分享的这款CSS3按钮外观非常特别,它看上去酷似晶莹剔 ...
CSS3鼠标滑过图片3D旋转动画
在线演示本地下载

随机推荐

2012天津C题
行李箱上的密码锁大家都知道, 现在给我们长度为n(n<=1000)的两个密码串,每次可以转动连续的1->3个字符1格,问最少多少次可以使得第一个串变成第二个串经历了搜索,贪心,的思路后, ...
ZOJ 2334(Monkey King-左偏树第一题)
Monkey King Time Limit: 10 Seconds Memory Limit: 32768 KB Once in a forest, there lived N aggre ...
Oracle SQL Lesson (6) - 使用Join进行联合查询
使用连接SQL 1999SELECT table1.column, table2.columnFROM table1[NATURAL JOIN table2] |[JOIN table2 USING ...
python战斗2：看到一个页面编码
编程环境:虚拟linux (windows 下 cygwin) 识别网页编码. usage: python coding http://www.***.com 測试结果: watermark/2/te ...
Windows下一个JSP环境配置
一.首先安装JDK 门户: http://write.blog.csdn.net/postedit/39999433 二.安装Myeclipse 事实上也能够安装eclipse然后再安装Myeclip ...
[Cocos2d-x v3.x]浅谈容器Vector
转载请注明来自:star特530的CSDN博客 http://blog.csdn.net/start530/article/details/19170853 前两天有人问我说在3.0 beta2版本号 ...
MSSQL只能访问特定的数据库
让用户只能访问特定的数据库(MSSQL) 背景客户的SQL Server实例上有多个厂商的数据库,每个数据库由各自的进行厂进行商维护, 为了限定不同厂商的维护人员只能访问自己的数据库,现需要给各个厂 ...
HDU--3081--Marriage Match II--最大匹配，匈牙利算法
Marriage Match II Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others ...
VC档(夹)文件夹路径的经营方针和代码
***********************************************声明*************************************************** ...
Android 它们的定义ContentProvider和ContentObserver充分利用
在他们的定义ContentProvider结合ContentObserver一起使用时,自己写的ContentProvider,在运行完insert.delete和update后,要手动地调用getC ...

css3 3d旋转动画

css3 3d旋转动画的更多相关文章

随机推荐

热门专题