图片素材：

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. rsa 签名 加密解密

    A->B 签名 ==========================A方+A方的私钥 => B收到后 用A方的公钥 验证签名 ==========================A-> ...

  2. awk 双引号vs单引号

    centos下面, awk '{...}' 和 awk "{...}" 差别是很大的: [ywt@YuWentao]$ echo "a b c d 1 2 3 4&quo ...

  3. gcc 使用

    参数 -E                只进行预处理-S                预处理和编译,生成汇编文件-c                预处理,编译和汇编,生成目标文件-g       ...

  4. kali2.0中dradis的使用方法

    启动脚本位于:/usr/lib/dradis下,再该目录下有一个start.sh文件,执行后,可以在浏览器中输入https://localhost:3004即可打开dradis的web接口 切记前面h ...

  5. oracle中lead和lag函数 （转载）

    解决上一户和下一户问题这两个函数,是偏移量函数,其用途是:可以查出同一字段下一个值或上一个值. lead(col_name,num,flag) col_name是列名:num是取向下第几个值:flag ...

  6. webservice发布服务：CXF及客户端调用

    2.CXF:(与spring整合) CXF相对来说操作没有AXIS繁琐 1.导入spring的jar包和cxf的jar包 2.在spring的核心配置文件中配置发布的接口类 <?xml vers ...

  7. QQ付费群规则重大变更！特别是这类群！

    很多人都是知道现在QQ有个付费群功能.以往加群需要你填写一些验证信息给管理员,管理员看你顺眼就放你进去,不顺眼你就进不去了.另外还有一些打广告的人难免会被管理员误判给放进去,令管理员苦恼不已,总有审核 ...

  8. yii 常用的多表查询

    return $this->model()->getDbConnection()->createCommand() ->select("t.type,t.title, ...

  9. MVC+Easeyui dialog的小问题

    今天在尝试 MVC+Easyui的练习中遇到的一些,小问题. 在.net MVC 中  在_layout.cshtml中设置Easyui 环境  ,在传到子页中,发现$("#dlg" ...

  10. xml schema xmlns xmlns:xsi xsi:schemaLocation targetnamespace

    先上一段xml文档 <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="htt ...