【Html+CSS】3D旋转相册

3D旋转木马相册 & 3D盒子相册因为代码大部分相同，就放一起了
注释一下就是另一个相册

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>3D旋转木马相册</title><style>body {background-color: #000;/* 视距，使子元素获得视距效果 */perspective: 900px;}section {margin: 20vh auto;position: relative;width: 200px;height: 200px;/* 开启3D空间 */transform-style: preserve-3d;/* 动画：动画名 一次动画时间 平稳 无限循环 */animation: rotate 20s linear infinite;}section:hover {/* 当鼠标移上去动画暂停 */animation-play-state: paused;}section img {width: 100%;height: 100%;/* 设置定位，先将图片都放在同一位置 */position: absolute;left: 0;top: 0;/* 倒影，下方 距离5px 线性渐变（旋转木马专用） *//* -webkit-box-reflect: below 5px -webkit-linear-gradient(transparent 50%, rgba(255, 255, 255, 0.3)); */}/* 3D 盒子相册 *//* 让第一个img子元素竖直旋转0度，向外推100px（因为盒子边长200px），其他同理 */section img:nth-child(1) {transform: rotateY(0deg) translateZ(100px);}section img:nth-child(2) {transform: rotateY(90deg) translateZ(100px);}section img:nth-child(3) {transform: rotateY(180deg) translateZ(100px);}section img:nth-child(4) {transform: rotateY(270deg) translateZ(100px);}section img:nth-child(5) {transform: rotateX(90deg) translateZ(100px);}section img:nth-child(6) {transform: rotateX(-90deg) translateZ(100px);}/* 设置动画帧，X和Y方向同时从0度转到360度 */@keyframes rotate {0% {transform: rotateY(0deg) rotateX(0deg);}100% {transform: rotateY(360deg) rotateX(360deg);}}/* 旋转木马 *//* section img:nth-child(1) {transform: rotateY(0deg) translateZ(240px);}section img:nth-child(2) {transform: rotateY(60deg) translateZ(240px);}section img:nth-child(3) {transform: rotateY(120deg) translateZ(240px);}section img:nth-child(4) {transform: rotateY(180deg) translateZ(240px);}section img:nth-child(5) {transform: rotateY(240deg) translateZ(240px);}section img:nth-child(6) {transform: rotateY(300deg) translateZ(240px);}@keyframes rotate {0% {transform: rotateY(0deg);}100% {transform: rotateY(360deg);}} */</style>
</head><body><section><img src="./p/0.jpg" alt=""><img src="./p/1.png" alt=""><img src="./p/1.jfif" alt=""><img src="./p/2.png" alt=""><img src="./p/4.jfif" alt=""><img src="./p/2.jfif" alt=""></section>
</body></html>

【Html+CSS】3D旋转相册相关推荐

3d旋转相册代码源码_如何使用CSS开发精美3D旋转相册？
借助CSS所提供的animation动画属性及2D.3D变换属性,我们可以摆脱对JavaScript的依赖,设计开发各类效果优秀的前端动态效果,在之前文章和视频中我们也介绍了不少基于CSS与JavaS ...
HTML+CSS制作3D旋转相册
一.HTML+CSS制作3D旋转相册哈哈哈,放寒假啦!又可以好好闭关修炼了,最近,在抽屉里无意中翻到了自己上小学时的照片,太可爱啦,照片我就不贴出来了,于是,我就想着用所学的知识,做一个3D旋转相册 ...
HTML5七夕情人节表白网页(抖音-流动爱心表白)HTML+CSS+JavaScript 求婚示爱代码 520情人节告白代码程序员表白源码 3D旋转相册 js烟花代码爱心表白网页
HTML5七夕情人节表白网页❤抖音-流动爱心表白❤ HTML+CSS+JavaScript 求婚示爱代码 520情人节告白代码程序员表白源码 3D旋转相册 js烟花代码爱心表白网页这是程序员表白 ...
HTML5七夕情人节表白网页(流星动画3D相册) HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码程序员表白源码 3D旋转相册 js烟花代码 css爱心表白
HTML5七夕情人节表白网页❤流星动画3D相册❤ HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码程序员表白源码抖音3D旋转相册 js烟花代码 css爱心表白这是 ...
纯CSS制作3D动态相册【流星雨3D旋转相册】HTML+CSS+JavaScriptHTML5七夕情人节表白网页制作
这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人看. 此波共有100个表白网站,可以任意修改和使用,很多人会希望向心爱的男孩女孩告白,生性腼腆的人即使那个 ...
HTML5七夕情人节表白网页(星空萤火虫) HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码程序员表白源码抖音3D旋转相册 js烟花代码 css爱心表白
HTML5七夕情人节表白网页(星空萤火虫) HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码程序员表白源码抖音3D旋转相册 js烟花代码 css爱心表白这是程序员 ...
HTML5七夕情人节表白网页(雪花爱心表白) HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码程序员表白源码抖音3D旋转相册 js烟花代码 css爱心表白
HTML5七夕情人节表白网页❤雪花爱心❤ HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码程序员表白源码抖音3D旋转相册 js烟花代码 css爱心表白这是程序员表 ...
HTML5七夕情人节表白网页(抖音超火3D炫酷魔方) HTML+CSS+JavaScript 求婚示爱代码 520情人节告白代码程序员表白源码 3D旋转相册 js烟花代码 css爱心表白
HTML5七夕情人节表白网页❤抖音超火❤3D炫酷魔方❤ HTML+CSS+JavaScript 求婚示爱代码 520情人节告白代码程序员表白源码 3D旋转相册 js烟花代码 css爱心表白这是程序 ...
HTML5七夕情人节表白网页_生日快乐粒子烟花(自定义文字)_ HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码程序员表白源码抖音3D旋转相册 js烟花代码
HTML5七夕情人节表白网页❤生日快乐粒子烟花(自定义文字)❤ HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码程序员表白源码抖音3D旋转相册 js烟花代码 css ...
HTML5七夕情人节表白网页(抖音-罗盘时钟) HTML+CSS+JavaScript 求婚示爱代码 520情人节告白代码程序员表白源码 3D旋转相册 js烟花代码 css爱心表白
HTML5七夕情人节表白网页❤抖音罗盘时钟❤ HTML+CSS+JavaScript 求婚示爱代码 520情人节告白代码程序员表白源码 3D旋转相册 js烟花代码 css爱心表白这是程序员表白系列 ...

【Html+CSS】3D旋转相册

【Html+CSS】3D旋转相册相关推荐

最新文章

热门文章