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

随机推荐

postgresql数据库配置csv格式的日志输出
postgresql数据库配置csv格风格日志输出以下介绍postgresql数据库中关于csv格式日志(pg中一种比較具体的日志输出方式)的设置方法. 1.进入$PGDATA文件夹(pg的安装文件 ...
Eclipse SVN 安装注意事项
1. 下载SVN 插件打开 Eclipse , 菜单条 Help -> Install New Software 在 Work with 这里加入网址 : http://subclipse ...
UVa 11408 - Count DePrimes
题目:一个数的素因子的和假设也是素数就叫做DePrimes,统计给定区间内的DePrimes. 分析:数论.本题使用用一种素数的筛法,欧拉筛法,也加线性筛法. 这样的方法,每次删选分两种情况:1.素因 ...
android删除文件出错
当删除一个文件,再又一次下载这个同名文件,保存到sdcard时出现error,部分手机出现 Caused by: libcore.io.ErrnoException: open failed: EBU ...
【Android开发经验】Android举UI设计经验
转载请注明出处:http://blog.csdn.net/zhaokaiqiang1992 1.Android眼下的主流设备分辨率为480×800.720×1280.1080×1920,单位是像素.在 ...
C# Windows Phone App 开发，修改【锁定画面】，从【Assets】、【UI】、【网路图片】，并解决失灵问题。
原文:C# Windows Phone App 开发,修改[锁定画面],从[Assets].[UI].[网路图片],并解决失灵问题. 一般我们在开发Windows Phone App,有时会希望透过应 ...
Eclipse+Maven创建webapp项目<二> （转）
Eclipse+Maven创建webapp项目<二> 1.开启eclipse,右键new——>other,如下图找到maven project 2.选择maven project,显 ...
Sqlserver中Over函数
Over函数不能单独使用,要和分析函数:rank(),dense_rank(),row_number()等一起使用. 其参数:over(partition by columnname1 order ...
hdu 神、上帝以及老天爷
HDU 2006'10 ACM contest的颁奖晚会隆重开始了! 为了活跃气氛,组织者举行了一个别开生面.奖品丰厚的抽奖活动,这个活动的具体要求是这样的: 首先,所有参加晚会的人员都将一张写有自己 ...
升级到tomcat8时Artifact SpringMvcDemo:war exploded: Server is not connected. Deploy is not
The method getDispatcherType() is undefined for the type HttpServletRequest 升级到tomcat8 http://segmen ...

css3 3d旋转动画

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

随机推荐

热门专题