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

随机推荐

在TextView中加入图片
TextView是一个非常强大的控件,有时须要在一个控件中同一时候显示图片和文字,使用TextView非常easy实现. 方法一: 聊天软件比方QQ一般都会有发送表情的功能,使用SpannableSt ...
Visual Studio跨平台开发实战(1) - Hello Xamarin!
原文 Visual Studio跨平台开发实战(1) - Hello Xamarin! 前言应用程式发展的脚步, 从来没有停过. 从早期的Windows 应用程式, 到网路时代的web 应用程式, ...
UVa 988 - Many Paths, One Destination
称号:生命是非常多的选择.现在给你一些选择(0~n-1),和其他选项后,分支数每一次选择,选择共求. 分析:dp,图论.假设一个状态也许是选择的数量0一个是,代表死亡,计数的路径数将达到所有死亡可以去 ...
Google的Guava它Collection升华
至于Guava这是不是在这里说.一个已被提上一个非常特殊的! 这主要是为了分享Guava对于一些升华处理组.井,不多说了,直接在代码: package com.joyce.guava.bean; /* ...
Effective C++：条款25：考虑写出一个不抛异常的swap函数
(一) 缺省情况下swap动作可由标准程序库提供的swap算法完毕: namespace std { template<typename T> void swap(T& a, T& ...
cocos2d触摸事件处理机制（2.x和3.x变化）
2.x的触摸事件的版本号触摸事件处理有2种子.以下单点触摸的样本.(另一种多点触摸屏). 创建cocos2d 该项目. 1. 重写下面虚函数. bool ccTouchBegan(cocos2d:: ...
基本调试命令 - u/ub/uf
原:http://www.cnblogs.com/developersupport/p/windbgcommand-u.html 在调试过程中难免会遇到须要反编译代码来分析逻辑的时候.在windbg中 ...
ICTCLAS用的字Lucene4.9捆绑
它一直喜欢的搜索方向,虽然无法做到.但仍保持了狂热的份额.记得那个夏天.这间实验室.这一群人,一切都随风而逝.踏上新征程.我以前没有自己.面对七三分技术的商业环境,我选择了沉淀.社会是一个大机器,我们 ...
Javascript中的__proto__、prototype、constructor
今天重温了下Javacript,给大家带来一篇Javascript博文,相信对于Javacript有一定了解的人都听过prototype原型这个概念,今天我们深度的分析下prototype与__pro ...
sql分隔字符串数组
declare @relation_code nvarchar(1024) set @relation_code = '#10000#10002' set @relation_code=substri ...

css3 3d旋转动画

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

随机推荐

热门专题