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

随机推荐

crm工作机会实体
using System; using Microsoft.Xrm.Sdk; using Microsoft.Crm.Sdk.Messages; public class Opport ...
JAVA先进-设置(1)
>Arrays 基本阵列 1.常见的数组产生于main() 函数,数组下标的索引不能超过0到int的范围 2.当程序试图訪问数组的第一个或者最后一个数据的时候,会发生ArrayIndexOutO ...
poj 3399 Product（数学）
主题链接:http://poj.org/problem?id=3399 Product Time Limit: 1000MS Memory Limit: 65536K Total Submissi ...
jQuery回到顶部插件jQuery GoUp
插件描写叙述 jQuery GoUp!是一个简单的jQuery插件,让你的网页用户直接回到顶部. 用法很easy 引用jquery库和jquery.goup.min.js到你的页面 <scrip ...
mysql寻呼最快
大家都知道,mysql分页写: select * from 'yourtable' limit start,rows 如今我数据库一张表里面有9969W条数据.表名叫tweet_data select ...
Android_declare-styleable_自己定义控件的属性
1.简单实例 (1).在res/values文件下定义一个attrs.xml文件 <? xml version="1.0" encoding="utf-8" ...
C++ 版本的split_string
vector<string> split_string(const string &in, char del, bool skip_empty) { vector<strin ...
java中间==、equals和hashCode差额
java于==.equals().hashCode()和比较两个对象. 关于== ==是easy理解的.java设计java就是要比較两个对象是不是同一个对象. 对于引用变量而言.比較的时候两个引用变 ...
Byte[]和BASE64之间的转换
一. BASE64编码把byte[]中的元素当做无符号八位整数转换成只含有64个基本字符的字符串,这些基本字符是: l 大写的A-Z l 小写的a-z l 数字0-9 l '+' 和 '/' l 空 ...
i++和i--运算符优先级
1.问题背景 /** * 測试i++和i-- */ package com.you.model; /** * @author YouHaiDong * @date 2014-08-16 */ @Sup ...

css3 3d旋转动画

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

随机推荐

热门专题