<!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. Android Monkey Test

    Monkey测试是Android自动化测试的一种手段,Monkey测试本身非常简单,就是模拟用户的按键输入,触摸屏输入,手势输入等,看设备多长时间会出异常.当Monkey程序在模拟器或设备运行的时候, ...

  2. chapter 10 统计检验

    1.permutation test 用途:用于检验两组数据是否出生于同一分布 思路:如果产生于同一分布,两组数据混合,重新排列后,计算的基于两组数据的函数值(均值,中位数,方差等,下面程序中使用f指 ...

  3. 线性表A-B

    1.顺序存储 #include<stdio.h> /* 设有两个顺序表A和B,且都递增有序,试写一算法,从A中删除与B中相同的那些元素,即求A-B */ #define getArrayL ...

  4. [Linux] 修改主机名（hostname）

    在Linux命令行下输入hostname,查看当前主机名,如果想修改它,直接在hostname后面加上新主机名即可(注:以下操作都需要root用户执行),如: # hostname newhostna ...

  5. Spring、Hello AOP

    AOP 概念:http://blog.csdn.net/moreevan/article/details/11977115 AOP 所使用到的jar 包: aspectjrt.jar common-a ...

  6. 学习wxpython的网站

    http://xoomer.virgilio.it/infinity77/Phoenix/main.html https://wxpython.org/Phoenix/docs/html/main.h ...

  7. 学习RAC小记-适合给新手看的RAC用法总结(转)

    原文:http://www.jianshu.com/p/ff79a5ae0353 什么是RAC? 几乎每一篇介绍RAC的文章开头都是这么一个问题.我这篇文章是写给新手(包括我自己)看的,所以这个问题更 ...

  8. oracle实例名,数据库名,服务名等概念差别与联系

    数据库名.实例名.数据库域名.全局数据库名.服务名 这是几个令非常多刚開始学习的人easy混淆的概念.相信非常多刚開始学习的人都与我一样被标题上这些个概念搞得一头雾水.我们如今就来把它们弄个明确. 一 ...

  9. Android 常用代码大集合 [转]

    [Android]调用字符串资源的几种方法   字符串资源的定义 文件路径:res/values/strings.xml 字符串资源定义示例: <?xml version="1.0&q ...

  10. C++顺序性容器、关联性容器与容器适配器

    什么是容器 首先,我们必须理解一下什么是容器,在C++ 中容器被定义为:在数据存储上,有一种对象类型,它可以持有其它对象或指向其它对像的指针,这种对象类型就叫做容器.很简单,容器就是保存其它对象的对象 ...