<!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. AOJ 2200 Mr. Rito Post Office（Floyd+单调DP）

    [题目链接] http://judge.u-aizu.ac.jp/onlinejudge/description.jsp?id=2200 [题目大意] 一张图中有陆路和水路,水路必须要有船才能走,当船 ...

  2. 成都UBER优步司机第六组奖励政策

    保底时段详解 滴滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs. ...

  3. C# 连接 Mysql 中文乱码问题

    网上有很多解决乱码的方法,什么 set names utf8   .什么在插入数据前进行编码,亲自试了都没有效果,在网上寻觅了很久,终于找到一种方法,并亲试成功: 首先要保证你的数据库是UTF8字符集 ...

  4. Qt on Android：QTableView不显示选中虚框

    在使用 QTableView 或 QTableWidget 时.有时我们不想要选中虚框,能够实现一个 ItemDelegate ,重写 drawFocus() 和 drawCheck()  两个虚函数 ...

  5. bootstrap注意事项（三）

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

  6. js实现弹出窗口、页面变成灰色并不可操作的例子

    function show() //显示隐藏层和弹出层 { var hideobj=document.getElementById("hidebg"); hidebg.style. ...

  7. xcode7 没有Empty Application

    如果你想创建xcode6.01之前版本提供的空工程,其实很简单.1:选择模板 Single View Application2:选中 Main.storyboard,将其删除3:选择项目的 plist ...

  8. Algorithms 4th - 1.1 Basic Programming Model - EXERCISES

    欢迎交流 1.1.1 a. 7 b. 200.0000002 c. true 1.1.2 a. 1.618 b. 10.0 c. true d. 33 1.1.3 public class MainA ...

  9. Twisted No module named win32api

    安装twisted成功后,使用时抛错: No module named win32api 解决方案,需要安装 pywin32 下载地址: https://sourceforge.net/project ...

  10. 如何正确理解正则表达式中的分隔符 \b

    前言:好久不见,博客园. 最近在学习研究regex,其中有个特迷惑自己的知识点是分隔符 ( word boundary) [\b] (注:为了方便,后文都以[]来包含字符,并不是reg规则里面的[] ...