<!doctype html>

 <html>

 <head>

 <meta charset="utf-8">

 <title>3D立方体旋转动画</title>

 <style type="text/css">

 @keyframes rotate{

 %{transform:rotateX(0deg) rotateY(0deg);}

 %{transform:rotateX(360deg) rotateY(360deg);}

 }

 @-webkit-keyframes rotate{

 %{transform:rotateX(0deg) rotateY(0deg);}

 %{transform:rotateX(360deg) rotateY(360deg);}

 }

 html{background:linear-gradient(#ff0 %,#3F9 %);height:%;}

 .wrap{margin:150px auto;perspective:1000px;width:200px;height:200px;}

 .cube{margin:auto;width:200px;height:200px;position:relative;transform-style:preserve-3d;animation:rotate 20s infinite linear;}

 .cube > div{width:%;height:%;position:absolute;background-color:#;opacity:.;border:1px solid #fff;color:#fff;font-size:36px;font-family:"微软雅黑";font-weight:bold;text-align:center;line-height:200px;transition:transform .2s ease-in;-webkit-transition:transform .2s ease-in;}

 .cube > span{display:block;width:100px;height:100px;border:1px solid #;background-color:#;position:absolute;top:50px;left:50px;}

 .cube > span img{width:100px;height:100px;}

 .cube .out-front{transform:translateZ(100px);-moz-transform:translateZ(100px);-webkit-transform:translateZ(100px);}

 .cube .out-back{transform:translateZ(-100px) rotateY(180deg);-moz-transform:translateZ(-100px) rotateY(180deg);-webkit-transform:translateZ(-100px) rotateY(180deg)}

 .cube .out-left{transform:translateX(-100px) rotateY(-90deg);-moz-transform:translateX(-100px) rotateY(-90deg);-webkit-transform:translateX(-100px) rotateY(-90deg);}

 .cube .out-right{transform:translateX(100px) rotateY(90deg);-moz-transform:translateX(100px) rotateY(90deg);-webkit-transform:translateX(100px) rotateY(90deg);}

 .cube .out-top{transform:translateY(-100px) rotateX(90deg);-moz-transform:translateY(-100px) rotateX(90deg);-webkit-transform:translateY(-100px) rotateX(90deg);}

 .cube .out-bottom{transform:translateY(100px) rotateX(-90deg);-moz-transform:translateY(100px) rotateX(-90deg);-webkit-transform:translateY(100px) rotateX(-90deg);}

 .cube .in-front{transform:translateZ(50px);-moz-transform:translateZ(50px);-webkit-transform:translateZ(50px);}

 .cube .in-back{transform:translateZ(-50px) rotateY(180deg);-moz-transform:translateZ(-50px) rotateY(180deg);-webkit-transform:translateZ(-50px) rotateY(180deg)}

 .cube .in-left{transform:translateX(-50px) rotateY(-90deg);-moz-transform:translateX(-50px) rotateY(-90deg);-webkit-transform:translateX(-50px) rotateY(-90deg);}

 .cube .in-right{transform:translateX(50px) rotateY(90deg);-moz-transform:translateX(50px) rotateY(90deg);-webkit-transform:translateX(50px) rotateY(90deg);}

 .cube .in-top{transform:translateY(-50px) rotateX(90deg);-moz-transform:translateY(-50px) rotateX(90deg);-webkit-transform:translateY(-50px) rotateX(90deg);}

 .cube .in-bottom{transform:translateY(50px) rotateX(-90deg);-moz-transform:translateY(50px) rotateX(-90deg);-webkit-transform:translateY(50px) rotateX(-90deg);}

 .wrap:hover .cube .out-front{transform:translateZ(200px);-moz-transform:translateZ(200px);-webkit-transform:translateZ(200px);}

 .wrap:hover .cube .out-back{transform:translateZ(-200px) rotateY(180deg);-moz-transform:translateZ(-200px) rotateY(180deg);-webkit-transform:translateZ(-200px) rotateY(180deg)}

 .wrap:hover .cube .out-left{transform:translateX(-200px) rotateY(-90deg);-moz-transform:translateX(-200px) rotateY(-90deg);-webkit-transform:translateX(-200px) rotateY(-90deg);}

 .wrap:hover .cube .out-right{transform:translateX(200px) rotateY(90deg);-moz-transform:translateX(200px) rotateY(90deg);-webkit-transform:translateX(200px) rotateY(90deg);}

 .wrap:hover .cube .out-top{transform:translateY(-200px) rotateX(90deg);-moz-transform:translateY(-200px) rotateX(90deg);-webkit-transform:translateY(-200px) rotateX(90deg);}

 .wrap:hover .cube .out-bottom{transform:translateY(200px) rotateX(-90deg);-moz-transform:translateY(200px) rotateX(-90deg);-webkit-transform:translateY(200px) rotateX(-90deg);}

 </style>

 </head>

 <body>

 <div class="wrap">

 <div class="cube">

 <div class="out-front"><img src="http://img.hoop8.com/attachments/1602/6421919920043.jpg"></div>

 <div class="out-back"><img src="http://img.hoop8.com/attachments/1602/6821919920043.jpg"></div>

 <div class="out-left"><img src="http://img.hoop8.com/attachments/1602/7231919920043.jpg"></div>

 <div class="out-right"><img src="http://img.hoop8.com/attachments/1602/7591919920043.jpg"></div>

 <div class="out-top"><img src="http://img.hoop8.com/attachments/1602/8111919920043.jpg"></div>

 <div class="out-bottom"><img src="http://img.hoop8.com/attachments/1602/8551919920043.jpg"></div>

 <span class="in-front"><img src="http://img.hoop8.com/attachments/1602/6421919920043.jpg"></span>

 <span class="in-back"><img src="http://img.hoop8.com/attachments/1602/6821919920043.jpg"></span>

 <span class="in-left"><img src="http://img.hoop8.com/attachments/1602/7231919920043.jpg"></span>

 <span class="in-right"><img src="http://img.hoop8.com/attachments/1602/7591919920043.jpg"></span>

 <span class="in-top"><img src="http://img.hoop8.com/attachments/1602/8111919920043.jpg"></span>

 <span class="in-bottom"><img src="http://img.hoop8.com/attachments/1602/8551919920043.jpg"></span>

 </div>

 </div>

 </body>

 </html>

利用CSS3的transform 3D制作的立方体旋转效果的更多相关文章

  1. 用CSS3的transform来做一个立方体

    有一次上数据结构课老师布置了一个用队列的思想通过js和Html来做一个“跳舞配对”的网页,当时那个跳舞的部分用了css3里面transform的相关属性做了个个让图片无限翻转的效果,可能正是由于这个效 ...

  2. CSS3系列之3D制作

    一.序 博主最近这些天,突发奇想的想研究一下CSS3的东西,从而提升一下CSS的能力,在学习的过程中发现其实CSS3是一个挺复杂的东西,深入的研究,你可能会涉及到初中的光学理论来帮助理解一些概念,同时 ...

  3. CSS3系列之3D制作 再研究

    水平翻转效果: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <t ...

  4. css3使用transform属性制作js弹性运动

    <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8& ...

  5. css3实践—创建3D立方体

    css3实践-创建3D立方体 要想实现3D的效果,其实非常简单,只需指定一个元素为容器并设置transform-style:preserve-3d,那么它的后代元素便会有3D效果.不过有很多需要注意的 ...

  6. 纯CSS3彩色边线3D立体按钮制作教程

    原文:纯CSS3彩色边线3D立体按钮制作教程 今天我们来分享一款利用纯CSS3实现的3D按钮,这款按钮的一个特点是有彩色的边线,这让整个按钮显得比较多姿多彩,没那么枯燥无趣.本文不仅可以让大家看到演示 ...

  7. 纯代码利用CSS3 圆角边框和盒子阴影 制作 iphone 手机效果

    原文:纯代码利用CSS3 圆角边框和盒子阴影 制作 iphone 手机效果 大家好,我是小强老师. 今天我们看下CSS3最为简单的两个属性. css3给我们带来了很多视觉的感受和变化,以前的图片做的事 ...

  8. 利用CSS3制作淡入淡出动画效果

    CSS3新增动画属性“@-webkit-keyframes”,从字面就可以看出其含义——关键帧,这与Flash中的含义一致. 利用CSS3制作动画效果其原理与Flash一样,我们需要定义关键帧处的状态 ...

  9. 利用css3实现3D轮播图

    动画实现主要利用了z-index将层级关系改变,从而实现了焦点图的效果:css3属性 transform rotate 来实现图片的动画效果 .transition实现过度动画! * { margin ...

随机推荐

  1. css案例学习之全局声明*{} 与body{}的区别

    代码 <html> <head> <title>全局声明</title> <style type="text/css"> ...

  2. jQuery粘性跟随滚动条滚动的导航栏源代码下载

    jQuery粘性跟随滚动条滚动的导航栏源代码下载 作者:网页模板 大小:0.005MB 点击次数:3494 发布时间:2014-03-07 12:55 分享到:0 特效介绍 jQuery粘性跟随滚动条 ...

  3. 判断一个字符串中是否包含另一个字符串（KMP、BF）

    判断一个字符串是否是另一个字符串的子串,也就是strstr()函数的实现,简单的实现方法是BF算法. 1.BF算法 int BF(char *s, char *p){ ; ; int j; while ...

  4. Cannot retrieve metalink for repository: epel.

    Error: Cannot retrieve metalink for repository: epel. Please verify its path and                     ...

  5. Oracle Where查询语句与排序语句

    SQL限制和排序数据 1.Oracle的Where条件值,字符串和日期都必须以单引号括起来. 模糊查询: like 'S%' 以S开头的任意字符 like 'S_' 以S开头的任意字符结尾的两个字符 ...

  6. fs.rename可以重新写入文件

    fs.rename可以重新写入文件 用法 fs.rename(旧path,新path,callback)可以重新写入文件 引用地址 http://www.jb51.net/article/58548. ...

  7. java基础之高级应用

    在程序中涉及方法重写的地方使用@override Annotation(只作用于方法)注释可以很好的避免由于重写方法名字过长而造成的程序后期出现的难以调试的错误,特别是程序没有报任何的错误时,而程序的 ...

  8. bootstrap注意事项（三）

    1.<code> 标签用于表示计算机源代码或者其他机器可以阅读的文本内容.软件代码的编写者已经习惯了编写源代码时文本表示的特殊样式.<code> 标签就是为他们设计的.包含在该 ...

  9. SharePoint 2013 WebPart属性面板配置

    为WebPart添加右侧的属性面板,方便将来对于WebPart的配置,我们只需要在CustomWebPart.cs文件里面,声明一下变量即可: private string url = string. ...

  10. .net通用权限框架C/S概览

    通用权限框架cs部分 先概述一下,cs使用vs2010+sql2008 和bs公用同一个数据库 为使界面好看使用了第三方控件 donetbar和devexpress,正版是要收费的,但是你们都明白的可 ...