css3动态旋转魔方练习
图片素材：
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动态旋转魔方练习的更多相关文章
- 用css3制作旋转加载动画的几种方法
以WebKit为核心的浏览器,例如Safari和Chrome,对html5有着很好的支持,在移动平台中这两个浏览器对应的就是IOS和Android.最近在开发一个移动平台的web app,那么就有机会 ...
- CSS3制作旋转导航
慕课网学习CSS3时,遇到个习题,觉得有必要总结学习下:CSS3制作旋转导航 慕课网习题地址:http://www.imooc.com/code/1883 示例及源码地址:http://codepen ...
- 纯CSS做3D旋转魔方
昨天偶然看见网友(简单说 用CSS做一个魔方旋转的效果)做的一个3D旋转魔方 效果就是本博客右侧公告栏所示 在这里把做法展现出来 感兴趣的可以试试 做成自己特有的魔方 <!DOCTYPE h ...
- CSS动画之旋转魔方轮播
很久没有回头来复习CSS方面的知识了, 正好又到了月底写文章的deadline......所以这次选择了详细巩固一下CSS3动画有关的知识点,因为之前只是用过一些属性并没有深究细节. 在我自己写完这篇 ...
- css3制作旋转动画
现在的css3真是强大,之前很多动画都是用jq来实现,但是css3制作的动画要比jq实现起来简单很多,今天呢,我自己也写了一个css旋转动画和大家分享.效果如下面的图片 思路:1.制作之前呢,我们先来 ...
- 纯css3实现旋转的太极图
效果图: 代码如下: <!DOCTYPE html> <html> <head lang="zh"> <meta charset=&quo ...
- CSS3实现旋转的太极图（二）：只用1个DIV
效果预览: PS: 1.昨天用3个DIV实现了太极图(点击查看),,今天试着用1个Div来做. 2.公司刚忙过双10周年庆,最近空闲下来,闲着也是闲着,总得写点东西吧. 3.高手莫喷,小弟仅仅是没 ...
- CSS3绘制旋转的太极图案（一）
实现步骤: 基础HTML: <div class="box-taiji"> <div class="circle-01">< ...
- 基于CSS3动态背景登录框代码
基于CSS3动态背景登录框代码.这是一款基于jQuery+CSS3实现的带有动画效果的动态背景登陆框特效.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class ...
随机推荐
- 用类方法------>快速创建一个autorelease的对象，在封装的类方法内部
在封装的类方法内部,也就是+ (id)personWithName:(NSString *)name andAge:(int)age内部: 创建了一个person对象,并且创建了一个person*类型 ...
- Go - 函数/方法 的 变参
变参 本质上就是一个切片.只能接收一个或多个同类型参数,且 必须放在参数列表的 尾部. func test(s string, a ...int) { fmt.Printf("%T, %v\ ...
- 搭建 Windows Server 2003 + IIS6.0 + FastCGI + PHP5.3.29 + MySQL5.5.38 + Memcached1.2.6
一.下载相关软件: 1.VC9运行库 即VISUAL C++ 2008 自PHP5.3.0开始,PHP提供VC2008编译版,需要安装VC++ 2008的运行库. [微软官方下载] http://ww ...
- .htaccess 基础教程（一）
.htaccess是什么? .htaccess叫分布式配置文件,它提供了针对目录改变配置的方法——在一个特定的文档目录中放置一个包含一个或多个指令的文件, 以作用于此目录及其所有子目录.并且子目录中的 ...
- BZOJ2435——[Noi2011]道路修建
1.题意:给个树,边的权值=两边的点数差*此边的长度,求所有边的权值和 2.分析:真不想说啥了...dfs即可 #include <cmath> #include <cstdio&g ...
- 序列化对象为xml字符串
/// <summary> /// 序列化对象为xml字符串 /// </summary> /// <param name="obj" ...
- jstl param url redirect import
import标签 import标签用来导入其他页面 属性: * url :引入页面的路径 * context :工程名 * var :将引入的页面保存到一个变量中 * scope :保存到一个作用域中 ...
- poj1001_Exponentiation_java高精度
Exponentiation Time Limit: 500MS Memory Limit: 10000K Total Submissions: 162918 Accepted: 39554 ...
- 导入excel数据到数据库
1.上传excel到服务器 jsp页面代码 <form action="actionname" method="post" id="form1& ...
- mac 安装nginx
首先准备工作,打开mac终端 1.安装brew 输入命令 curl -LsSf http://github.com/mxcl/homebrew/tarball/master | sudo tar x ...