图片素材：

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. nginx虚拟主机配置笔记

    1.添加配置文件 /etc/nginx/sites-available/ 下新建文件 phpmyadmin 文件内容 server { listen 80; listen [::]:80; serve ...

  2. T-SQL实用查询之分析数据库表的大小

    IF OBJECT_ID('tempdb..#TB_TEMP_SPACE') IS NOT NULL DROP TABLE #TB_TEMP_SPACE GO CREATE TABLE #TB_TEM ...

  3. Redis学习 - 配置属性：protected-mode

    根据redis的说明,protected-mode在同时存在如下两种情况时触发: 1) The server is not binding explicitly to a set of address ...

  4. 关于CDN的认识

    传统的未加缓存服务的访问过程: 用户提交域名→浏览器对域名进行解释→得到目的主机的IP地址→根据IP地址访问发出请求→得到请求数据并回复 由上可见,用户访问未使用CDN缓存网站的过程为: 1).用户向 ...

  5. sql select 综合运用

    1 : 多个表联合查询 select j.id,         jt.Name,        j.ApproveType ,         j.ProductCode,         j.Cu ...

  6. XCTest各种断言

    XCTFail(format…) 生成一个失败的测试: XCTAssertNil(a1, format...)为空判断,a1为空时通过,反之不通过: XCTAssertNotNil(a1, forma ...

  7. tornado 路由系统----扩展（include）

    在Tornado中实现Django分层路由 看了几个 Tornado 的 demo 发现都是一个py搞定所有,这样做做为例子来讲确实很直观,但如果在大型项目中这样做肯定不现实,所以博主考虑如何制定合理 ...

  8. mysql ERROR 1045 (28000): 错误解决办法

    ERROR 1045 (28000): Access denied for user 'ODBC'@'localhost' (using password: NO) ERROR 1045 (28000 ...

  9. Unity 3D学习之《Unity 3D 手机游戏开发》1

    P10: 设置断点步骤02,在Project窗口右键(是在下图中的红色区域,点右键)选择[Sync Mono Develop Project],打开MonoDevelop编辑器 P11: " ...

  10. 2.EasyUI学习总结(二)——easyloader分析与使用(转载)

    本文转载自:http://www.cnblogs.com/haogj/archive/2013/04/22/3036685.html 使用脚本库总要加载一大堆的样式表和脚本文件,在easyui 中,除 ...