首先让我们来看一下最终效果图：

当鼠标放在图片上是介个样子滴：

是不是觉得很好看？那接下来就一起制作吧！

我个人觉得编程，首先是思路，然后是代码，一起分析一下这个效果的思路。

1.背景颜色，它属于一种渐变的背景色（当然这不是重点，可以根据自己的爱好进行设置）；

2.我们可以观察一下他是有两个旋转的立方体，大立方体套小立方体；

3.点击图片的时候，外部大立方体向外延伸。

有了这个大体的思路我们就可以开始敲代码了。

1.新建文件夹

将各个不同类型的代码进行归类是很有必要的，新建css和img文件夹，将事先保存的图片放在img里面，新建demo.css放在css文件夹里，新建demo.html放在外面。

2.将背景设置成渐变

*{

    padding:;

    margin:;

}

body{

    width:100%;

    height:100%;

    background:linear-gradient(yellow 0%,black 100%);

}

这里为了方便用*号代替，padding 和margin是为了清除默认的间距。linear-gradient就是设置渐变属性的必要元素啦。

3.制作旋转大立方体

html代码：

<div id="react">

        <div class="out_frount">

            <img src="img/1.jpg" class="out_pic">

        </div>

        <div class="out_back">

            <img src="img/2.jpg" class="out_pic">

        </div>

        <div class="out_left">

            <img src="img/3.jpg" class="out_pic">

        </div>

        <div class="out_right">

            <img src="img/4.jpg" class="out_pic">

        </div>

        <div class="out_top">

            <img src="img/5.jpg" class="out_pic">

        </div>

        <div class="out_bottom">

            <img src="img/6.jpg" class="out_pic">

        </div>

    </div>

css代码：

#react{

    width: 200px;

    height:200px;

    margin: 200px auto;

    transform-style:preserve-3d;

    animation:rotate 20s infinite;

    animation-timing-function: linear;

}

#react div{

    position:absolute;

    transition: all .4s;

}

div .out_pic{

    width:200px;

    height:200px;

    opacity:0.9;

}

@keyframes rotate{

    from{transform: rotateX(0deg) rotateY(0deg);}

    to{transform: rotateX(360deg) rotateY(360deg);}

}

.out_frount{

    transform:translateZ(100px);

}

.out_back{

    transform:translateZ(-100px);

}

.out_left{

    transform:rotateY(90deg) translateZ(100px);

}

.out_right{

    transform: rotateY(-90deg) translateZ(100px);

}

.out_top{

    transform:rotateX(90deg) translateZ(100px);

}

.out_bottom{

    transform: rotateX(-90deg) translateZ(100px);

}

思路：

（1）首先写一个大的div用来包裹立方体的图片，然后再用六个div包裹六个img代表正反体的各个面。

（2）通过position：absolute;属性使六张图片重叠。

（3）@keyframes定义rotate放方法用于旋转图片，在#react中使用animation引入，到此为止就可以看到图片旋转效果了。

（4）通过transform定位img的div是六张图片组成正方体,这个地方如果不太明白建议画一个平面直角坐标系，这样更直观哦

注：margin的宽高很关键，需要和正方体大小一样，否则旋转的时候回四处乱转……

到此为止一个大的立方体旋转就出来了，小的思路是一样的，这里不再演示。

鼠标放在图片上图片展开：

#react:hover .out_frount{

    transform:translateZ(200px);

}

#react:hover .out_back{

    transform:translateZ(-200px);

}

#react:hover .out_left{

    transform:rotateY(90deg) translateZ(200px);

}

#react:hover .out_right{

    transform: rotateY(-90deg) translateZ(200px);

}

#react:hover .out_top{

    transform:rotateX(90deg) translateZ(200px);

}

#react:hover .out_bottom{

    transform: rotateX(-90deg) translateZ(200px);

}

思路：

直接使用hover 更改包裹图片的div距离z轴的距离（好别扭的话……）

上完整代码：

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<link rel="stylesheet" href="css/demo.css">

</head>

<body>

<div id="react">

    <div class="out_frount">

        <img src="img/1.jpg" class="out_pic">

    </div>

    <div class="out_back">

        <img src="img/2.jpg" class="out_pic">

    </div>

    <div class="out_left">

        <img src="img/3.jpg" class="out_pic">

    </div>

    <div class="out_right">

        <img src="img/4.jpg" class="out_pic">

    </div>

    <div class="out_top">

        <img src="img/5.jpg" class="out_pic">

    </div>

    <div class="out_bottom">

        <img src="img/6.jpg" class="out_pic">

    </div>

    <span class="in_frount">

        <img src="img/7.jpg" class="in_pic">

    </span>

    <span class="in_back">

        <img src="img/8.jpg" class="in_pic">

    </span>

    <span class="in_left">

        <img src="img/9.jpg" class="in_pic">

    </span>

    <span class="in_right">

        <img src="img/10.jpg" class="in_pic">

    </span>

    <span class="in_top">

        <img src="img/11.jpg" class="in_pic">

    </span>

    <span class="in_bottom">

        <img src="img/12.jpg" class="in_pic">

    </span>

</div>

</body>

</html>
*{

    padding:;

    margin:;

}

body{

    width:100%;

    height:100%;

    background:linear-gradient(yellow 0%,black 100%);

}

#react{

    width: 200px;

    height:200px;

    margin: 200px auto;

    transform-style:preserve-3d;

    animation:rotate 20s infinite;

    animation-timing-function: linear;

}

#react div{

    position:absolute;

    transition: all .4s;

}

div .out_pic{

    width:200px;

    height:200px;

    opacity:0.9;

}

div .in_pic{

    width:100px;

    height:100px;

}

#react span{

    display:block;

    position:absolute;

    width:100px;

    height:100px;

    top:50px;

    left:50px;

}

@keyframes rotate{

    from{transform: rotateX(0deg) rotateY(0deg);}

    to{transform: rotateX(360deg) rotateY(360deg);}

}

.out_frount{

    transform:translateZ(100px);

}

.out_back{

    transform:translateZ(-100px);

}

.out_left{

    transform:rotateY(90deg) translateZ(100px);

}

.out_right{

    transform: rotateY(-90deg) translateZ(100px);

}

.out_top{

    transform:rotateX(90deg) translateZ(100px);

}

.out_bottom{

    transform: rotateX(-90deg) translateZ(100px);

}

.in_frount{

    transform:translateZ(50px);

}

.in_back{

    transform:translateZ(-50px);

}

.in_left{

    transform:rotateY(90deg) translateZ(50px);

}

.in_right{

    transform: rotateY(-90deg) translateZ(50px);

}

.in_top{

    transform:rotateX(90deg) translateZ(50px);

}

.in_bottom{

    transform: rotateX(-90deg) translateZ(50px);

}

#react:hover .out_frount{

    transform:translateZ(200px);

}

#react:hover .out_back{

    transform:translateZ(-200px);

}

#react:hover .out_left{

    transform:rotateY(90deg) translateZ(200px);

}

#react:hover .out_right{

    transform: rotateY(-90deg) translateZ(200px);

}

#react:hover .out_top{

    transform:rotateX(90deg) translateZ(200px);

}

#react:hover .out_bottom{

    transform: rotateX(-90deg) translateZ(200px);

}

@charset "utf-8";

/* CSS Document */

这里用span是为了区分里面的立方体。

/***************************根据腾讯直播课程总结*************************/

css3制作旋转立方体相册的更多相关文章

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

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

  2. CSS3制作旋转导航

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

  3. css3制作旋转动画

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

  4. CSS3制作旋转的小风车

    制作旋转小风车 一 我先搭建一个大盒子400x400px大盒子里面嵌套四个小盒子200x200px,放在一起肯定是四个排在一行,我想要的效果是上下各两个, css样式 *{ margin:0; pad ...

  5. 解惑：如何使用html+css+js实现旋转相册，立方体相册等动画效果

    解惑:如何使用html+css+js实现旋转相册,立方体相册等动画效果 一.前言 最初还是在抖音上看到可以使用简单地代码实现炫酷的网页效果的,但是想要找到可以运行的代码还是比较困难的,最近突然想起就在 ...

  6. 网页特效：用CSS3制作3D图片立方体旋转特效

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  7. CSS3 3D图片立方体旋转

    html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <titl ...

  8. 纯CSS3超酷3D旋转立方体动画特效

    简要教程 这是一款神奇的纯 CSS3 立方体动画特效插件.使用CSS3来制作动画效果已经成为WEB前端开发的一种时尚,从简单的颜色和尺寸动画,到复杂的旋转.翻转动画, CSS3 展现了它无穷的魅力.使 ...

  9. css3之3D 旋转立方体与哆啦A梦

    主要记录两个css3 3D转换的示例   ㈠哆啦A梦 三个哆啦A梦的图片,分别让其围绕X轴,Y轴,Z轴旋转60度,鼠标放上开始发生变化. 具体代码如下图所示: <!DOCTYPE html> ...

随机推荐

  1. Nginx内置变量

    $args #请求中的参数值 $query_string #同 $args $arg_NAME #GET请求中NAME的值 $is_args #如果请求中有参数,值为"?",否则为 ...

  2. PHP面向对象笔记

    一.构造函数.析构函数(1)构造函数:__construct()说明:对象被实例化时调用,可带参数例: $obj = new A($a,$b); (2)析构函数:_destruct()说明:页面执行结 ...

  3. SSIS 处理NULL

    不同于SQL Server中NULL表示值是未知的(Unknown Value),没有数据类型,但是,在SSIS中,NULL是有数据类型的,要获取某一个NULL值,必须指定数据类型,例如,变量 Int ...

  4. Python第一天 - 函数

    ---恢复内容开始--- (一)定义一个函数 def 函数名(参数): 函数体 return 返回值 例: def mySum(x , y): return int(x)+int(y)print(my ...

  5. Windows下使用Dev-C++开发基于pthread.h的多线程程序

    一.下载Windows版本的pthread 目前最新版本是:pthreads-w32-2-9-1-release.zip. 二.解压pthread到指定目录      我选择的目录是:E:\DEV-C ...

  6. 关于ThinkPHP在BAE上URL的rewrite问题

    在BAE上若想用ThinkPHP的那一套URL路由方式,必须在BAE上rewrite一下,之前我就直接用了不过是403错误,rewrite方式如下: 把你在BAE上的文件checkout到本地,在根目 ...

  7. Connect(); // 2015 简要整理

    去年 Connect(); 2014 Visual Studio Contact(); 直播笔记 对于我个人来说,今年 Connect(); 的三个重要发布: ASP.NET 5 RC1 Entity ...

  8. Java内存模型深度解析：final--转

    原文地址:http://www.codeceo.com/article/java-memory-6.html 与前面介绍的锁和Volatile相比较,对final域的读和写更像是普通的变量访问.对于f ...

  9. Oracle普通表->分区表转换(9亿数据量)

    背景介绍: 环境:Linux 5.5 + Oracle 10.2.0.4 某普通表T,由于前期设计不当没有分区,如今几年来的数据量已达9亿+, 空间占用大约350G,在线重定义为分区表不现实,故采取申 ...

  10. C#创建安全的字典(Dictionary)存储结构

    在上面介绍过栈(Stack)的存储结构,接下来介绍另一种存储结构字典(Dictionary). 字典(Dictionary)里面的每一个元素都是一个键值对(由二个元素组成:键和值) 键必须是唯一的,而 ...