忽然见到那一个apple的底下的非常绝对漂亮,所以啊,我就改革了一下
做了三个图片版本的,好像很三人都做了个

下面这几个是预览地址
要是浏览速度慢的话,下边是自家做了三个包出来
兼容FF,IE
yzc388亚洲城网页版:css制作的一个相册效果代码打包下载,css3立方体相册。在线演示

本地下载

css3制作旋转立方体相册,css3立方体相册

率先让大家来看一下尾声效果图:
yzc388亚洲城网页版 1

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

yzc388亚洲城网页版 2

是否感到很为难?那接下去就共同制作吧!

本身个人感到编制程序,首先是思路,然后是代码,一同深入分析一下以此功用的思路。

1.背景颜色,它属于一种渐变的背景象(当然那不是重视,能够依照自身的欣赏实行设置);

2.我们能够观测一下他是有三个旋转的立方体,大立方体套小立方体;

3.点击图片的时候,外界大立方体向外拉开。

有了那一个大致的笔触我们就能够开头敲代码了。

1.新建文件夹

将顺序不一致品类的代码实行归类是很有不可或缺的,新建css和img文件夹,将事先保存的图片放在img里面,新建demo.css放在css文件夹里,新建demo.html放在外面。

2.将背景设置成渐变

*{
    padding:0;
    margin:0;
}
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>

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


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


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


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


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


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

</div>
</body>
</html>

*{
    padding:0;
    margin:0;
}
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是为了差距里面包车型客车立方体。

/***************************依靠Tencent直播课程总括*************************/

首先让我们来看一下终极效果图: 当鼠标放在图片上是介个样子滴:
是还是不是以为很为难?这接下…

Photoshop轻便制作xhtml css网页页面xhtml
css网址重构web标准等等之类的小说太多了,作者就不重复了,发个最简便易行的造作xhtml
css页面包车型地铁法子,方法就算相当粗略,但真不一定有多少人知道….
起码google找寻没寻觅到。 开首吧: 1、张开photoshop cs2
,展开设计出的网址首页。用切成丝工具切好。   图:

你只怕感兴趣的篇章:

  • JS 相册效果
    自动播放[地面整合]
  • 搜罗的13个免费的jQuery相册
  • javascript椭圆旋转相册完毕代码
  • jQuery
    和讯相册鼠标移动展现遮掩效果落到实处代码
  • Android
    ViewPager相册横向移动的实现情势
  • 基于spring+hibernate+JQuery开拓之电子相册(附源码下载)
  • Android拍照保存在系统相册不显得的标题化解措施
  • Android
    使用Gallery实现3D相册(附效果图+德姆o源码)
  • android照相、相册获取图片剪裁报错的化解格局
  • 原生js达成移动支付轮播图、相册滑动特效
  • javaWEB达成相册管理的简约意义

yzc388亚洲城网页版 3

2、点 文件-》存款和储蓄为web所用格式 神速键为ctrl alt shift s
,点右上倒三角的小图片,选用艾德it output settings   图:

yzc388亚洲城网页版 4

3、见图,在其次个下拉中甄选 Slices,选择Generate CSS
,然后在背后的下拉中选By ID   图:

网站地图xml地图