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 ...

随机推荐

nyoj 776 删除元素
删除元素时间限制:1000 ms | 内存限制:65535 KB 难度:2 描述题意很简单,给一个长度为n的序列,问至少删除序列中多少个数,使得删除后的序列中的最大值<= 2*最小值输 ...
PAT Mooc datastructure 6-1
Saving James Bond - Hard Version This time let us consider the situation in the movie "Live and ...
jvm死锁解决
那我们怎么确定一定是死锁呢?有两种方法. 1>使用JDK给我们的的工具JConsole,可以通过打开cmd然后输入jconsole打开. 1)连接到需要查看的进程.
install alilang
$sudo dpkg -i alilang.deb $ sudo alilang
sscanf提取字符串中的数据php
1.需求理解sscanf的作用 2.例子 $str = "age:30 weight:60kg"; sscanf($str,"age:%d weight:%dkg&qu ...
iterator接口
Iterator用来做遍历,所有实现Collection接口的容器都有一个Iterator的方法以返回一个Iterator接口的对象
.NET 获取类型中的属性
解决方案通过反射的方式获取类型中的所有属性. 引用命名空间 using System.Reflection; 实体类 public class User { private string ...
万全R630服务器组装RAID5阵列
随笔, 昨天领导让我给一台服务器做系统,本身作为开发的我有一些挑战.而且领导说的事,怎么着也得努努力试试不是? 下午去机房找到服务器本以为仅仅是装个系统完事,而且据我了解服务器本身有系统,以为拿着系统 ...
iOS 判断纯汉字，还是是否含有汉字
参考:http://www.jianshu.com/p/18cc511b5828 在一些特定的情况下,我们需要判断字符串是否为纯汉字,还是只是含有汉字的情况.我把它写成了一个分类,方便大家使用 NSS ...
【leetcode】Climbing Stairs
题目简述: You are climbing a stair case. It takes n steps to reach to the top. Each time you can either ...

css3动态旋转魔方练习

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

随机推荐

热门专题