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旋转动画
在线演示本地下载

随机推荐

Eclipse关闭检查
有没有发现每次操作Eclipse过后,都会有build Workspace的操作一直在后台执行,JS校验一直validate,非常卡非常受不了有木有? 有木有?以下是我个人成功的步骤,曾经试过非常多次 ...
【从翻译mos文章】Weblogic AdminServer 启动fail，报错"unable to get file lock, will retry"
Weblogic AdminServer 启动fail,报错"unable to get file lock, will retry" 参考原始: Weblogic AdminSe ...
[033] 微信公众帐号开发教程第9篇-QQ表情的发送与接收
我想大家对QQ表情一定不会陌生,一个个小头像极大丰富了聊天的乐趣,使得聊天不再是简单的文字叙述,还能够配上喜.怒.哀.乐等表达人物心情的小图片.本文重点要介绍的内容就是如何在微信公众平台使用QQ表情, ...
Nginx+Varnish
Nginx+Varnish 实现动静分离,为服务器分流,降低服务器负载相必大家在看加快网站响应速度方面的文章时,都提过这么一条:动静分离.那怎样实现动静分离呢,这里笔者就亲自搭建相关服务实现动静分离 ...
Install Oracle 11gR2 on Debian wheezy(转)
Install Oracle 11gR2 on Debian wheezy 出处:http://gaiustech.wordpress.com/2013/06/26/howto-install-ora ...
BeagleBone Black 板第三课：Debian7.5系统安装和远程控制BBB板
BBB板第三课:Debian7.5系统安装和远程控制BBB板由于BBB板系统是Debian 7.4.据说使用Debian系统能够实现非常多BBB板的无缝连接.能够更好的学习和控制BBB板,所以就决定 ...
左右xcode的重构选项的一些理解
Rename(重命名):对标示符进行重命名,以获得更好的代码可读性,这些标示符包含类,方法或者函数的名称. Extract(抽取):将你在XCode种选择的代码抽取到一个新的方法或函数中. Creat ...
由单页面web应用引发的企业应用问题
由于单页面web应用的流行,client与server端之间都对应的产生了一些微妙的变化,比方,client原来仅仅是用来展示页面和理清逻辑,而现在逐渐转变成了一个可以进入驱动状态的应用程序. 未来的 ...
Java采用HttpClient对于Web登录
http://e.neusoft.edu.cn/nav_login 模拟浏览器登录该网站上方.登录server基于验证码.refer和cookie保护,此代码html档. import java.io ...
String类疑虑
Java String类疑虑: 创拼接 String是java的经常使用类之中的一个,本质是字符数组char[].String类是final类,不可被继承. 关于String的创建,能够通过new来 ...

css3 3d旋转动画

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

随机推荐

热门专题