图片素材：

html部分：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1" />
<title>葫芦兄弟旋转相册</title><base target="_blank" />
<link rel="stylesheet" href="css/hovertree.css" />
</head>
<body>
<div class="hovertreeinfo">
<!--/*外层最大容器*/-->
<div class="wrap">
<!-- /*包裹所有元素的容器*/-->
<div class="cube">
<!--前面图片 -->
<div class="out_front">
<img src="data:images/1.jpg" class="pic" />
</div>
<!--后面图片 -->
<div class="out_back">
<img src="data:images/2.jpg" class="pic" />
</div>
<!--左图片 -->
<div class="out_left">
<img src="data:images/3.jpg" class="pic" />
</div>
<div class="out_right">
<img src="data:images/4.jpg" class="pic" />
</div>
<div class="out_top">
<img src="data:images/5.jpg" class="pic" />
</div>
<div class="out_bottom">
<img src="data:images/6.jpg" class="pic" />
</div>
<!--小正方体 -->
<span class="in_front">
<img src="data:images/1.jpg" class="in_pic" />
</span>
<span class="in_back">
<img src="data:images/2.jpg" class="in_pic" />
</span>
<span class="in_left">
<img src="data:images/3.jpg" class="in_pic" />
</span>
<span class="in_right">
<img src="data:images/4.jpg" class="in_pic" />
</span>
<span class="in_top">
<img src="data:images/5.jpg" class="in_pic" />
</span>
<span class="in_bottom">
<img src="data:images/6.jpg" class="in_pic" />
</span>
</div>
</div>
</body>
</html>

css部分：

html{
background:linear-gradient(#ccc 0%,#000 80%);
height: 100%;
color:red;
}
/*最外层容器样式*/
.wrap{
width: 200px;
height: 200px;
/*改变左右上下,图片方块移动*/
margin: 150px auto;
position: relative;
margin:300px auto;

}
/*包裹所有容器样式*/
.cube{
width: 200px;
height: 200px;
margin: 0 auto;
transform-style: preserve-3d;
transform: rotateX(-30deg) rotateY(-80deg);
-webkit-animation: rotate 20s infinite;
/*匀速*/
animation-timing-function:

linear;
}

@-webkit-keyframes rotate{
from{transform: rotateX(0deg) rotateY(0deg);}
to{transform: rotateX(360deg) rotateY(360deg);}
}
.cube div{
position: absolute;
width: 200px;
height: 200px;
opacity: 0.8;
transition: all .4s;
}
/*定义所有图片样式*/
.pic{
width: 200px;
height: 200px;
}
.cube .out_front{
transform: rotateY(0deg) translateZ(100px);
}
.cube .out_back{
transform: translateZ(-100px) rotateY(180deg);
}
.cube .out_left{
transform: rotateY(90deg) translateZ(100px);
}
.cube .out_right{
transform: rotateY(-90deg) translateZ(100px);
}
.cube .out_top{
transform: rotateX(90deg) translateZ(100px);
}
.cube .out_bottom{
transform: rotateX(-90deg) translateZ(100px);
}
/*定义小正方体样式
*/
.cube span{
display: bloack;
width: 100px;
height: 100px;
position: absolute;
top: 50px;
left: 50px;
}
.cube .in_pic{
width: 100px;
height: 100px;
}
.cube .in_front{
transform: rotateY(0deg) translateZ(50px);
}
.cube .in_back{
transform: translateZ(-50px) rotateY(180deg);
}
.cube .in_left{
transform: rotateY(90deg) translateZ(50px);
}
.cube .in_right{
transform: rotateY(-90deg) translateZ(50px);
}
.cube .in_top{
transform: rotateX(90deg) translateZ(50px);
}
.cube .in_bottom{
transform: rotateX(-90deg) translateZ(50px);
}
/*鼠标移入后样式*/
.cube:hover .out_front{
transform: rotateY(0deg) translateZ(200px);
}
.cube:hover .out_back{
transform: translateZ(-200px) rotateY(180deg);
}
.cube:hover .out_left{
transform: rotateY(90deg) translateZ(200px);
}
.cube:hover .out_right{
transform: rotateY(-90deg) translateZ(200px);
}
.cube:hover .out_top{
transform: rotateX(90deg) translateZ(200px);
}
.cube:hover .out_bottom{
transform: rotateX(-90deg) translateZ(200px);
}
.hovertreeinfo{text-align:center;}
.hovertreeinfo a{color:white}

css3动态旋转魔方练习的更多相关文章

  1. 用css3制作旋转加载动画的几种方法

    以WebKit为核心的浏览器,例如Safari和Chrome,对html5有着很好的支持,在移动平台中这两个浏览器对应的就是IOS和Android.最近在开发一个移动平台的web app,那么就有机会 ...

  2. CSS3制作旋转导航

    慕课网学习CSS3时,遇到个习题,觉得有必要总结学习下:CSS3制作旋转导航 慕课网习题地址:http://www.imooc.com/code/1883 示例及源码地址:http://codepen ...

  3. 纯CSS做3D旋转魔方

    昨天偶然看见网友(简单说 用CSS做一个魔方旋转的效果)做的一个3D旋转魔方  效果就是本博客右侧公告栏所示 在这里把做法展现出来 感兴趣的可以试试  做成自己特有的魔方 <!DOCTYPE h ...

  4. CSS动画之旋转魔方轮播

    很久没有回头来复习CSS方面的知识了, 正好又到了月底写文章的deadline......所以这次选择了详细巩固一下CSS3动画有关的知识点,因为之前只是用过一些属性并没有深究细节. 在我自己写完这篇 ...

  5. css3制作旋转动画

    现在的css3真是强大,之前很多动画都是用jq来实现,但是css3制作的动画要比jq实现起来简单很多,今天呢,我自己也写了一个css旋转动画和大家分享.效果如下面的图片 思路:1.制作之前呢,我们先来 ...

  6. 纯css3实现旋转的太极图

    效果图: 代码如下: <!DOCTYPE html> <html> <head lang="zh"> <meta charset=&quo ...

  7. CSS3实现旋转的太极图（二）：只用1个DIV

    效果预览:   PS: 1.昨天用3个DIV实现了太极图(点击查看),,今天试着用1个Div来做. 2.公司刚忙过双10周年庆,最近空闲下来,闲着也是闲着,总得写点东西吧. 3.高手莫喷,小弟仅仅是没 ...

  8. CSS3绘制旋转的太极图案（一）

        实现步骤: 基础HTML: <div class="box-taiji"> <div class="circle-01">< ...

  9. 基于CSS3动态背景登录框代码

    基于CSS3动态背景登录框代码.这是一款基于jQuery+CSS3实现的带有动画效果的动态背景登陆框特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class ...

随机推荐

  1. C#模拟鼠标键盘控制其他窗口（一)

    编写程序模拟鼠标和键盘操作可以方便的实现你需要的功能,而不需要对方程序为你开放接口.比如,操作飞信定时发送短信等.我之前开发过飞信耗子,用的是对飞信协议进行抓包,然后分析协议,进而模拟协议的执行,开发 ...

  2. CSS gradient渐变之webkit核心浏览器下的使用

    一.关于渐变 渐变是一种应用于平面的视觉效果,可以从一种颜色逐渐地转变成另外一种颜色,故可以创建类似于彩虹的效果渐变可以应用在任何可以使用图片的地方.例如,您可以指定一个这么一个渐变:顶部的颜色是红色 ...

  3. sdcms留言提交

    引入这两个js <script src="{webroot}lib/validator/jquery.validator.js"></script>< ...

  4. JSON.stringify()和JSON.parse()

    parse用于从一个字符串中解析出json对象,如 var str = '{"name":"huangxiaojian","age":&qu ...

  5. mac brew install redis 报错

    mac brew install redis 报错 /usr/local/opt/php55/bin/phpize /usr/local/opt/php55/bin/phpize: line 61: ...

  6. 6.openstack之mitaka搭建网络节点

    部署网络服务 一:控制节点配置 1.建库建用户 mysql -u root -p CREATE DATABASE neutron; GRANT ALL PRIVILEGES ON neutron.* ...

  7. 可以改变this指向的方法

    this一般指向的是当前被调用者,但也可以通过其它方式来改变它的指向,下面将介绍三种方式: 1.call用作继承时: function Parent(age){ this.name=['mike',' ...

  8. C#设计模式之抽象工厂

    抽象工厂模式:提供一个创建一系列相关或相互依赖对象的接口,而无须指定它们具体的类. 抽象工厂模式中的具体工厂不只是创建一种产品,它负责创建一族产品 当一个工厂等级结构可以创建出分属于不同产品等级结构的 ...

  9. Extjs DOM操作的几个类

    Extjs提供了非常完善的DOM操作方法,可以方便的操作DOM.另外Extjs还可以方便的查询DOM元素,并把这些DOM元素封装成Ext.Element对象,通过Element对象我们可以操作DOM元 ...

  10. 【Java EE 学习 36】【struts2】【struts2系统验证】【struts2 ognl值栈】【struts2 ongl标签】【struts2 UI标签】【struts2模型驱动和令牌机制】

    一.struts2系统验证 1.基于struts2系统验证的方式实际上就是通过配置xml文件的方式达到验证的目的. 2.实际上系统校验的方法和手工校验的方法在底层的基本实现是相同的.但是使用系统校验的 ...