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的新特性介绍
Oct 31 HTML / CSS
CSS3区域模块region相关编写示例
Aug 28 HTML / CSS
html5文本内容_动力节点Java学院整理
Jul 11 HTML / CSS
html5新特性与用法大全
Sep 13 HTML / CSS
HTML5网页录音和上传到服务器支持PC、Android,支持IOS微信功能
Apr 26 HTML / CSS
浅谈基于HTML5的在线视频播放方案
Feb 18 HTML / CSS
HTML5中原生的右键菜单创建方法
Jun 28 HTML / CSS
基于HTML5的WebGL经典3D虚拟机房漫游动画
Nov 15 HTML / CSS
浅谈由position属性引申的css进阶讨论
May 25 HTML / CSS
深入理解CSS 中 transform matrix矩阵变换问题
Aug 30 HTML / CSS
CSS中妙用 drop-shadow 实现线条光影效果
Nov 11 HTML / CSS
css3手动实现pc端横向滚动
Jun 21 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
细谈php中SQL注入攻击与XSS攻击
2012/06/10 PHP
PHP代码审核的详细介绍
2013/06/13 PHP
解决PHP里大量数据循环时内存耗尽的方法
2015/10/10 PHP
CodeIgniter常用知识点小结
2016/05/26 PHP
php版微信公众平台接口参数调试实现判断用户行为的方法
2016/09/23 PHP
php面向对象之反射功能与用法分析
2017/03/29 PHP
PHP使用PDO抽象层获取查询结果的方法示例
2018/05/10 PHP
ThinkPHP5框架中使用JWT的方法示例
2020/06/03 PHP
js 中的switch表达式使用示例
2020/06/03 Javascript
js实现二代身份证号码验证详解
2014/11/20 Javascript
nodejs教程之制作一个简单的文章发布系统
2014/11/21 NodeJs
node.js实现BigPipe详解
2014/12/05 Javascript
Vue自定义指令介绍(2)
2016/12/08 Javascript
js+css3实现旋转效果
2017/01/20 Javascript
js 获取元素的具体样式信息getcss(实例讲解)
2017/07/05 Javascript
Vue axios 中提交表单数据(含上传文件)
2017/07/06 Javascript
Angular路由ui-router配置详解
2018/08/01 Javascript
简单了解TypeScript中如何继承 Error 类
2019/06/21 Javascript
jquery 回调操作实例分析【回调成功与回调失败的情况】
2019/09/27 jQuery
JavaScript之Blob对象类型的具体使用方法
2019/11/29 Javascript
解决antd日期选择组件,添加value就无法点击下一年和下一月问题
2020/10/29 Javascript
Python实现基本线性数据结构
2016/08/22 Python
Python partial函数原理及用法解析
2019/12/11 Python
Python并发concurrent.futures和asyncio实例
2020/05/04 Python
Python 爬虫的原理
2020/07/30 Python
基于Python的一个自动录入表格的小程序
2020/08/05 Python
创业计划书中包含的9个方面
2013/12/26 职场文书
房地产经营管理专业自荐信
2014/09/02 职场文书
纪念九一八事变83周年国旗下讲话稿
2014/09/15 职场文书
2014党员整改措施思想汇报
2014/10/07 职场文书
实习生矿工检讨书
2014/10/13 职场文书
检讨书模板大全
2015/05/07 职场文书
趣味运动会新闻稿
2015/07/17 职场文书
《走遍天下书为侣》教学反思
2016/02/22 职场文书
CSS 制作波浪效果的思路
2021/05/18 HTML / CSS
电脑无法安装Windows 11怎么办?无法安装Win11的解决方法
2021/11/21 数码科技