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 相关文章推荐
CSS3使用多列制作瀑布流
May 10 HTML / CSS
CSS3 倾斜的网页图片库实例教程
Nov 14 HTML / CSS
CSS3盒子模型详解
Apr 24 HTML / CSS
纯CSS3制作的简洁蓝白风格的登录模板(非IE效果更好)
Aug 11 HTML / CSS
使用css3制作动感导航条示例
Jan 26 HTML / CSS
css3实例教程 一款纯css3实现的环形导航菜单
Oct 20 HTML / CSS
socket.io 和canvas 实现的共享画板功能
May 22 HTML / CSS
html5+css3实现一款注册表单实例
Apr 17 HTML / CSS
HTML5 Canvas——用路径描画线条实例介绍
Jun 09 HTML / CSS
HTML页面中添加Canvas标签示例
Jan 01 HTML / CSS
HTML5 canvas基本绘图之文字渲染
Jun 27 HTML / CSS
教你做个可爱的css滑动导航条
Jun 15 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
ThinkPHP 防止表单重复提交的方法
2011/08/08 PHP
解析php中var_dump,var_export,print_r三个函数的区别
2013/06/21 PHP
PHP设计模式之工厂模式与单例模式
2016/09/28 PHP
PHP简单实现冒泡排序的方法
2016/12/26 PHP
一组JS创建和操作表格的函数集合
2009/05/07 Javascript
Javascript 定时器调用传递参数的方法
2009/11/12 Javascript
js控制div及网页相关属性的代码
2009/12/19 Javascript
点击显示指定元素隐藏其他同辈元素的方法
2014/02/19 Javascript
JS+CSS实现Li列表隔行换色效果的方法
2015/02/16 Javascript
js绘制圆形和矩形的方法
2015/08/05 Javascript
JS实现点击登录弹出窗口同时背景色渐变动画效果
2016/03/25 Javascript
jQuery无刷新上传之uploadify简单代码
2017/01/17 Javascript
JS实现二维数组横纵列转置的方法
2018/04/17 Javascript
Vue filter格式化时间戳时间成标准日期格式的方法
2018/09/16 Javascript
JavaScript中.min.js和.js文件的区别讲解
2019/02/13 Javascript
[03:57]DOTA2英雄梦之声_第03期_幻影刺客
2014/06/21 DOTA
[51:15]完美世界DOTA2联赛PWL S2 PXG vs Magma 第一场 11.21
2020/11/24 DOTA
跟老齐学Python之通过Python连接数据库
2014/10/28 Python
python3 tcp的粘包现象和解决办法解析
2019/12/09 Python
pytorch中tensor.expand()和tensor.expand_as()函数详解
2019/12/27 Python
Python如何在DataFrame增加数值
2020/02/14 Python
pycharm下配置pyqt5的教程(anaconda虚拟环境下+tensorflow)
2020/03/25 Python
Python爬虫爬取杭州24时温度并展示操作示例
2020/03/27 Python
virtualenv介绍及简明教程
2020/06/23 Python
利用 CSS3 实现的无缝轮播功能代码
2017/09/25 HTML / CSS
德国汽车零件和汽车配件网上商店:kfzteile24
2018/11/14 全球购物
KELLER SPORTS荷兰:在线订购最好的运动产品
2020/10/13 全球购物
什么叫应用程序域?什么是托管代码?什么是强类型系统?什么是装箱和拆箱?什么是重载?CTS、CLS和CLR分别作何解释?
2012/05/23 面试题
优秀教师事迹简介
2014/02/02 职场文书
委托公证书范本
2014/04/03 职场文书
离婚案件答辩状
2015/05/22 职场文书
2016八一建军节慰问信
2015/11/30 职场文书
2016年学校安全教育月活动总结
2016/04/06 职场文书
idea搭建可运行Servlet的Web项目
2021/06/26 Java/Android
django中websocket的具体使用
2022/01/22 Python
使用pd.merge表连接出现多余行的问题解决
2022/06/16 Python