纯CSS3制作炫酷的3D相册

整体效果如下所示：

整体代码如下所示：
html中的代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>3D炫酷相册</title><link rel="stylesheet" href="index.css">
</head>
<body><div class="container"><div class="cube"><!-- 外面立方体开始 --><div class="out_front"><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 class="in_front" id="small"><img src="img/7.jpg" class="in_pic"/></div><div class="in_back" id="small"><img src="img/8.jpg" class="in_pic"/></div><div class="in_left" id="small"><img src="img/9.jpg" class="in_pic"/></div><div class="in_right" id="small"><img src="img/10.jpg" class="in_pic"/></div><div class="in_top" id="small"><img src="img/11.jpg" class="in_pic"/></div><div class="in_bottom" id="small"><img src="img/12.jpg" class="in_pic"/></div><!-- 里面立方体结束 --></div></div>
</body>
</html>

css中的代码

*{margin: 0;padding: 0;
}
:root,body{height: 100%;width: 100%;background-color: black;
}
/* 最外层容器样式 */
.container{width: 200px;height: 200px;position: absolute;perspective: 2000px;/* 调整视距 */top: calc(50% - 100px);left: calc(50% - 100px);/* 垂直水平居中 */
}
/*立方体容器样式*/
.cube{width: 200px;height: 200px;transform-style: preserve-3d;transform: rotateX(-30deg) rotateY(-80deg);animation: roddy 10s linear infinite;/*设置动画匀速重复*/
}
@keyframes roddy{0%{transform: rotateX(0deg) rotateY(0deg);}100%{transform: rotateX(360deg) rotateY(360deg);}
}
.cube div{position: absolute;width: 200px;height: 200px;opacity: 0.8;/* 设置透明度 */transition: all 0.4s;/* 过渡动画 */
}
/* 外面照片大小设置 */
.out_pic{width: 200px;height: 200px;
}
.cube .out_front{transform: rotateY(0deg) translateZ(100px);
}
.cube .out_back{transform: rotateY(180deg) translateZ(100px);
}
.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 #small{position: absolute;width: 100px;height: 100px;top: 50px;left: 50px;
}
/* 里面照片大小设置 */
.in_pic{width: 100px;height: 100px;
}.cube .in_front{transform: rotateY(0deg) translateZ(50px);
}
.cube .in_back{transform: rotateY(180deg) translateZ(50px) ;
}
.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: rotateY(180deg) translateZ(200px);
}
.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);
}

下面是详细的制作过程

①搭建项目基础的布局

html中的代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>3D炫酷相册</title><link rel="stylesheet" href="index.css">
</head>
<body><div class="container"><div class="cube"><!-- 外面立方体开始 --><div class="out_front"><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 class="in_front" id="small"><img src="img/7.jpg" class="in_pic"/></div><div class="in_back" id="small"><img src="img/8.jpg" class="in_pic"/></div><div class="in_left" id="small"><img src="img/9.jpg" class="in_pic"/></div><div class="in_right" id="small"><img src="img/10.jpg" class="in_pic"/></div><div class="in_top" id="small"><img src="img/11.jpg" class="in_pic"/></div><div class="in_bottom" id="small"><img src="img/12.jpg" class="in_pic"/></div><!-- 里面立方体结束 --></div></div>
</body>
</html>

css中的代码

*{margin: 0;padding: 0;
}
:root,body{height: 100%;width: 100%;background-color: black;
}
/* 最外层容器样式 */
.container{width: 200px;height: 200px;position: absolute;top: calc(50% - 100px);left: calc(50% - 100px);
}
/*立方体容器样式*/
.cube{width: 200px;height: 200px;
}.cube div{position: absolute;width: 200px;height: 200px;
}
/* 外面照片大小设置 */
.out_pic{width: 200px;height: 200px;
}.cube #small{position: absolute;width: 100px;height: 100px;top: 50px;left: 50px;
}
/* 里面照片大小设置 */
.in_pic{width: 100px;height: 100px;
}

浏览器运行结果如下：

②搭建3D空间，并给出合适的视距

css代码如下

.container{perspective: 2000px;
}
.cube{transform-style: preserve-3d;transform: rotateX(-30deg) rotateY(-80deg);
}.cube .out_front{transform: rotateY(0deg) translateZ(100px);
}
.cube .out_back{transform: rotateY(180deg)translateZ(100px);
}
.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 .in_front{transform: rotateY(0deg) translateZ(50px);
}
.cube .in_back{transform: rotateY(180deg) translateZ(50px) ;
}
.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);
}

浏览器运行结果如下

③添加动画并设置为匀速重复运动

css代码如下

.cube{animation: roddy 10s linear infinite;/*匀速重复*/
}
@keyframes roddy{0%{transform: rotateX(0deg) rotateY(0deg);}100%{transform: rotateX(360deg) rotateY(360deg);}
}

④设置最外层立方体的透明度，并添加一个hover伪类

css代码如下

.cube div{opacity: 0.8;transition: all 0.4s;
}/*鼠标移入后样式*/
.cube:hover .out_front{transform: rotateY(0deg) translateZ(200px);
}
.cube:hover .out_back{transform: rotateY(180deg) translateZ(200px);
}
.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);
}

纯CSS3制作炫酷的3D相册相关推荐

520情人节送女朋友的3D相册礼物~html+css+js实现抖音炫酷樱花3D相册(含音乐)
520情人节送女朋友的3D相册礼物~html+css+js实现抖音炫酷樱花3D相册(含音乐) 一年一度的/520情人节/七夕情人节/生日礼物/告白师妹/程序员表白,是不是要给女朋友或者正在追求的妹子一 ...
❤520情人节送女朋友的生日礼物~html+css+js实现抖音炫酷樱花3D相册(含音乐)
❉ 520情人节送女朋友的3D相册礼物~html+css+js实现抖音炫酷樱花3D相册(含音乐) 一年一度的/520情人节/七夕情人节/生日礼物/告白师妹/程序员表白,是不是要给女朋友或者正在追求的妹 ...
html设置发光字体制作,CSS3制作炫酷的自定义发光文字
CSS3制作炫酷的自定义发光文字 text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FF1177, 0 0 35px ...
炫酷html动画,纯CSS3一个炫酷动画
纯CSS3一个炫酷动画通过下边的代码可以看到这个例子的html代码还是很简单的,中间类似图标的部分是通过给两个围绕盒子爬的虫子通过给 HTML代码 CSS代码 body{ margin: 0; b ...
html飞机动画,基于纯CSS3纸飞机炫酷动画特效
简要教程 Flyaway.css是一款使用纯CSS3制作的炫酷纸飞机动画特效.Flyout模式可以应用于登录页面,信息发送成功,如果填的信息有误,可以使用Shake模式,代表信息输入有误. Flyaw ...
❤女朋友生日❤ HTML+css3+js 实现抖音炫酷樱花3D相册 (含背景音乐)程序员表白必备
一年一度的/520/七夕情人节/女朋友生日/程序员表白,是不是要给女朋友或者正在追求的妹子一点小惊喜呢,今天这篇博客就分享下前端代码如何实现3D立体动态相册.赶紧学会了,来制作属于我们程序员的浪漫吧! ...
❤女朋友生日❤ HTML+css3+js 实现抖音炫酷樱花3D相册 (含背景音乐)程序员表白必备...
一年一度的/520/七夕情人节/女朋友生日/程序员表白,是不是要给女朋友或者正在追求的妹子一点小惊喜呢,今天这篇博客就分享下前端代码如何实现3D立体动态相册.赶紧学会了,来制作属于我们程序员的浪漫吧! ...
html border阴影效果_一篇文章教会你使用html+css3制作炫酷效果
[一.项目背景] 在浏览一些网站的时候,经常会看到很多的炫酷的效果去装饰页面,使它看起来更高端大气一些.比如,艺龙就采用了图片上加载文字,点击图片使把对应的图片放大,使用户清晰,直观的看到内容.这种效 ...
js中select下拉框重置_如何利用CSS3制作炫酷的下拉框
很多小伙伴都不清楚CSS3是做什么?用途是什么? 接下来我就给展示一个css3制作一个炫酷下拉框.其实不只是这些,还有很多. CSS3是CSS(层叠样式表)技术的升级版本,于1999年开始制订,200 ...

纯CSS3制作炫酷的3D相册

纯CSS3制作炫酷的3D相册

①搭建项目基础的布局

②搭建3D空间，并给出合适的视距

③添加动画并设置为匀速重复运动

④设置最外层立方体的透明度，并添加一个hover伪类

纯CSS3制作炫酷的3D相册相关推荐

最新文章

热门文章