HTML5 3D旋转相册的实现示例


Posted in HTML / CSS onDecember 03, 2019

前一段时间,突然看到一个炫酷的3D旋转相册,这里记录一下,先看效果图:

HTML5 3D旋转相册的实现示例

HTML5 代码如下:

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>HTML5 3D旋转图片相册 可鼠标悬停</title>
<style text="text/css">
* {
padding: 0;
margin: 0;
border: none;
outline: none;
box-sizing: border-box;
}

*:before,
*:after {
box-sizing: border-box;
}

html,
body {
min-height: 100%;
}

body {
background-image: radial-gradient(mintcream 0%, lightgray 100%);
;
}

.Container {
margin: 4% auto;
width: 210px;
height: 140px;
position: relative;
perspective: 1000px;
}

#carousel {
width: 100%;
height: 100%;
position: absolute;
transform-style: preserve-3d;
animation: rotation 20s infinite linear;
}

#carousel:hover {
animation-play-state: paused;
}

#carousel figure {
display: block;
position: absolute;
width: 220px;
height: 120px;
left: 10px;
top: 10px;
background: black;
overflow: hidden;
border: solid 5px black;
}

img {
filter: grayscale(1);
cursor: pointer;
transition: all 0.3s ease 0s;
width: 100%;
height: 100%;
}

img:hover {
filter: grayscale(0);
transform: scale(1.2, 1.2);
}

#carousel figure:nth-child(1) {
transform: rotateY(0deg) translateZ(288px);
}

#carousel figure:nth-child(2) {
transform: rotateY(60deg) translateZ(288px);
}

#carousel figure:nth-child(3) {
transform: rotateY(120deg) translateZ(288px);
}

#carousel figure:nth-child(4) {
transform: rotateY(180deg) translateZ(288px);
}

#carousel figure:nth-child(5) {
transform: rotateY(240deg) translateZ(288px);
}

#carousel figure:nth-child(6) {
transform: rotateY(300deg) translateZ(288px);
}

@keyframes rotation {
from {
transform: rotateY(0deg);
}
to {
transform: rotateY(360deg);
}
}
</style>
</head>

<body>
<div class="Container">
<div id="carousel">
<figure><img src="img/1.jpg" alt=""></figure>
<figure><img src="img/2.jpg" alt=""></figure>
<figure><img src="img/3.jpg" alt=""></figure>
<figure><img src="img/4.jpg" alt=""></figure>
<figure><img src="img/5.jpg" alt=""></figure>
<figure><img src="img/6.jpg" alt=""></figure>
</div>
</div>
</body>

</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
html5 css3 动态气泡按钮实例演示
Dec 02 HTML / CSS
html5+css3之CSS中的布局与Header的实现
Nov 21 HTML / CSS
利用CSS3实现圆角的outline效果的教程
Jun 05 HTML / CSS
初探CSS3中的calc()功能
Jul 14 HTML / CSS
CSS3弹性盒模型开发笔记(二)
Apr 26 HTML / CSS
使用CSS3实现SVG路径描边动画效果入门教程
Oct 21 HTML / CSS
HTML5 Canvas 实现圆形进度条并显示数字百分比效果示例
Aug 18 HTML / CSS
HTML5 常见面试题之PC端和移动端区别介绍
Jan 22 HTML / CSS
使用canvas压缩图片上传的方法示例
Feb 07 HTML / CSS
CSS 圆形进度栏
Apr 06 HTML / CSS
CSS极坐标的实例代码
Jun 03 HTML / CSS
css 边框添加四个角的实现代码
Oct 16 HTML / CSS
H5页面适配iPhoneX(就是那么简单)
Dec 02 #HTML / CSS
web字体加载方案优化小结
Nov 29 #HTML / CSS
HTML5 Blob 实现文件下载功能的示例代码
Nov 29 #HTML / CSS
使用数据结构给女朋友写个Html5走迷宫游戏
Nov 26 #HTML / CSS
五分钟学会HTML5的WebSocket协议
Nov 22 #HTML / CSS
通过canvas转换颜色为RGBA格式及性能问题的解决
Nov 22 #HTML / CSS
HTML5 weui使用笔记
Nov 21 #HTML / CSS
You might like
超强分页类2.0发布,支持自定义风格,默认4种显示模式
2007/01/02 PHP
PHP 数字左侧自动补0
2008/03/31 PHP
深入理解:XML与对象的序列化与反序列化
2013/06/08 PHP
PHP制作万年历
2015/01/07 PHP
php生成word并下载代码实例
2019/03/15 PHP
jQuery 拖动层(在可视区域范围内)
2012/05/24 Javascript
函数式 JavaScript(一)简介
2014/07/07 Javascript
9款2014最热门jQuery实用特效推荐
2014/12/07 Javascript
jQuery中extend函数详解
2015/07/13 Javascript
整理AngularJS框架使用过程当中的一些性能优化要点
2016/03/05 Javascript
Javascript中字符串和数字的操作方法整理
2017/01/22 Javascript
JavaScript for循环 if判断语句(学习笔记)
2017/10/11 Javascript
JavaScript html5 canvas实现图片上画超链接
2017/10/20 Javascript
JS+H5 Canvas实现时钟效果
2018/07/20 Javascript
在iFrame子页面里实现模态框的方法
2018/08/17 Javascript
vue+vant实现商品列表批量倒计时功能
2020/01/13 Javascript
Vue Render函数创建DOM节点代码实例
2020/07/08 Javascript
JSON 入门教程基础篇 json入门学习笔记
2020/09/22 Javascript
Python查询Mysql时返回字典结构的代码
2012/06/18 Python
python3.3教程之模拟百度登陆代码分享
2014/01/16 Python
python使用递归解决全排列数字示例
2014/02/11 Python
Python验证码识别处理实例
2015/12/28 Python
python简单区块链模拟详解
2019/07/03 Python
pandas 层次化索引的实现方法
2019/07/06 Python
Django 过滤器汇总及自定义过滤器使用详解
2019/07/19 Python
Python的Lambda函数用法详解
2019/09/03 Python
python基于FTP实现文件传输相关功能代码实例
2019/09/28 Python
python爬虫调度器用法及实例代码
2020/11/30 Python
德国网上花店:Valentins
2018/08/15 全球购物
The North Face北面荷兰官网:美国著名户外品牌
2019/10/16 全球购物
Yahoo-PHP面试题1
2016/07/20 面试题
校园安全演讲稿
2014/05/09 职场文书
给市场的环保建议书
2014/05/14 职场文书
扩展多台相同的Web服务器
2021/04/01 Servers
OpenCV-Python实现轮廓拟合
2021/06/08 Python
java实现自定义时钟并实现走时功能
2022/06/21 Java/Android