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>

时间： 2024-11-08 11:49:29

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

CSS3 3D旋转动画代码实例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

Android中的补间动画分为下面几种: (1)AlphaAnimation :透明度改变的动画. (2)ScaleAnimation:大小缩放的动画. (3)TranslateAnimation:位移变化的动画. (4)RotateAnimation:旋转动画. 然而在实际项目中透明度.缩放.位移.旋转这几种动画并不能满足我们的需求,比如我们需要一个类似下面的3D旋转动画. 这时候就需要用到自定义动画,自定义动画需要继承Animation,并重写applyTransformation(floa

css3 3d旋转图片立方体特效代码

一.什么是css3 3d旋转 ? 形成一个3D空间: transform-style:preserve-3d ( 让父元素形成3D,让其子元素在3D空间进行变化 ). 3d场景,在垂直于屏幕的方法,相对于3d多出个z轴,Z轴:靠近屏幕的方向是正向,远离屏幕的方向是反向,2d场景,在屏幕上水平和垂直的交叉线x轴和y轴. 二.关于css 3d旋转的相关属性及使用方法变形属性:transform 3D功能函数 ----3D的位移:transform:translate3d(x,y,z);

CSS3——3D旋转图（跑马灯效果图）

CSS3新增了很多新的属性,可以用很少的代码实现炫酷的动画效果,但由于兼容性各浏览器的能力存在不足,有特别需求的网站就呵呵啦.H5C3已是大势所趋了,之前看过一个新闻,Chrome将在年底全面转向H5,抛弃了Flash.. 本案例主要使用了CSS3中的变换transform和动画animation属性,实现了跑马灯效果,详细的解释在代码中的注释中. 做好布局之后的效果图添加了animation样式,实现自动旋转,并且鼠标移入,停止动画.(鼠标移入,绕Z轴旋转90度) 代码: 1 <!DOCTY

利用css3制作旋转动画

利用css3功能强大,我们可以直接完成旋转动画的制作,而跳过复杂的javascript. html代码如下:demo01.html <!DCTYPE html> <head> <meta type="utf-8"/> <title>旋转动画</title> <link rel="stylesheet" type="t

Android 3D旋转动画之Camera 和 Matrix

前面两篇博文讲解的都是Android 的2D动画效果,要想做出非常炫酷的3D动画效果怎么办?android 并没有提供3D动画接口给用户,所以我们得自己重写这样一个3D接口动画. 接口如下: /* * @Title: My3dAnimation.java * @Description: TODO<请描述此文件是做什么的> * @author: xjp * @data: 2014年9月15日上午8:54:10 * @version: V1.0 */ package com.xjp.animat

8套迷人精致的CSS3 3D按钮动画

1.纯CSS3 3D按钮按钮酷似牛奶般剔透 CSS3按钮一般都可以设计的非常漂亮,利用投影.渐变等CSS3属性特效可以把按钮渲染的十分动感.今天分享的这款CSS3按钮外观非常特别,它看上去酷似晶莹剔透的牛奶,而且在点击按钮时出现3D效果的动画,按钮按下时,按钮会轻轻的弹动一下,非常逼真. 在线演示源码下载 2.纯CSS3实现动感弹性按钮今天我们来分享一款很有意思的CSS3按钮,当你把鼠标滑过按钮时,整个按钮就会全身扭动起来,像是有弹性一样,非常动感.另外,按钮的结构非常简单,你可以通过合适

css3立体旋转动画

demo地址效果图在别人网站上看到一个立体旋转的例子,然后突然想到自己前几天学习的css3旋转,就试着做了一个例子,看起来有一些粗糙. html结构很简单: <div> <ul class="ani"> <li class="r1">1</li> <li class="r2">2</li> <li class="r3">3</li&g

CSS3 3D翻转动画

CSS3动画属性:transform(变换):大小.位置.颜色.变形等状态的变化transition(过渡):初始状态过渡到结束状态这个过程中产生的动画animation(动画):定义关键帧动画 CSS3可以实现多种动画效果,下面说的是CSS3实现一个3D翻转的动画效果. <div class="container"> <div class="wrapHover> <div class="wrap"> <div c