css-3d旋转相册
2024-03-31 20:14:34
css-3d旋转相册
1、转载地址：程序员女朋友的相册是这样的
2、效果
3、代码（复制可用）
<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title>css-3d旋转相册</title><style>html{background:linear-gradient(#FF6666 0%,#336699 20%);/*背景渐变颜色*/height: 100%;color:#99cc33;/*文字颜色*/}/*最外层容器样式*/.wrap{width: 200px;height: 200px;/*改变左右上下,图片方块移动*/margin: 150px auto;position: relative;}/*包裹所有容器样式*/.cube{width: 200px;height: 200px;margin: 0 auto;transform-style: preserve-3d;transform: rotateX(-30deg) rotateY(-80deg);-webkit-animation: rotate 20s infinite;/*匀速*/animation-timing-function: linear;}@-webkit-keyframes rotate{from{transform: rotateX(0deg) rotateY(0deg);}to{transform: rotateX(360deg) rotateY(360deg);}}.cube div{position: absolute;width: 200px;height: 200px;opacity: 0.8;transition: all .4s;}/*定义所有图片样式*/.pic{width: 200px;height: 200px;}.cube .out_front{transform: rotateY(0deg) translateZ(100px);}.cube .out_back{transform: translateZ(-100px) rotateY(180deg);}.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 span{display: bloack;width: 100px;height: 100px;position: absolute;top: 50px;left: 50px;}.cube .in_pic{width: 100px;height: 100px;}.cube .in_front{transform: rotateY(0deg) translateZ(50px);}.cube .in_back{transform: translateZ(-50px) rotateY(180deg);}.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: translateZ(-200px) rotateY(180deg);}.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);}*/.hovertreeinfo{text-align:center;}.hovertreeinfo a{color:white}</style>
</head>
<body>
<div class="hovertreeinfo"><h2>3D图片旋转</h2>
</div>
<!--/*外层最大容器*/-->
<div class="wrap"><!-- /*包裹所有元素的容器*/--><div class="cube"><!--前面图片 --><div class="out_front"><img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3104194953,617480653&fm=26&gp=0.jpg" class="pic" /></div><!--后面图片 --><div class="out_back"><img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1570190499,3408240602&fm=26&gp=0.jpg" class="pic" /></div><!--左图片 --><div class="out_left"><img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2113881760,2913304975&fm=26&gp=0.jpg" class="pic" /></div><div class="out_right"><img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=4095394213,1272226896&fm=11&gp=0.jpg" class="pic" /></div><div class="out_top"><img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2484758016,2231158131&fm=26&gp=0.jpg" class="pic" /></div><div class="out_bottom"><img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3576291600,3103815948&fm=11&gp=0.jpg" class="pic" /></div><!--小正方体 --><span class="in_front"><img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3315838951,2925046183&fm=26&gp=0.jpg" class="in_pic" /></span><span class="in_back"><img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2311925248,2521631346&fm=26&gp=0.jpg" class="in_pic" /></span><span class="in_left"><img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1629181125,3793485573&fm=26&gp=0.jpg" class="in_pic" /></span><span class="in_right"><img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1263550701,2004494872&fm=26&gp=0.jpg" class="in_pic" /></span><span class="in_top"><img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1899402122,4230827200&fm=26&gp=0.jpg" class="in_pic" /></span><span class="in_bottom"><img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2011982264,1922646236&fm=26&gp=0.jpg" class="in_pic" /></span></div>
</div>
<script>//每过5秒 样式修改var index = 1;setInterval(function(){if(index%2==1){out_open();}else{out_close();}index = (index%2==0) ? 1 : 0;}, 5000); //设置每5秒打开，关闭//设置鼠标移入打开效果function out_open(){document.getElementsByClassName('out_front')[0].style.cssText = 'transform:rotateY(0deg) translateZ(200px)';document.getElementsByClassName('out_back')[0].style.cssText = 'transform:translateZ(-200px) rotateY(180deg)';document.getElementsByClassName('out_left')[0].style.cssText = 'transform:rotateY(90deg) translateZ(200px)';document.getElementsByClassName('out_right')[0].style.cssText = 'transform:rotateY(-90deg) translateZ(200px)';document.getElementsByClassName('out_top')[0].style.cssText = 'transform:rotateX(90deg) translateZ(200px)';document.getElementsByClassName('out_bottom')[0].style.cssText = 'transform:rotateX(-90deg) translateZ(200px)';}//设置鼠标移出关闭效果function out_close() {document.getElementsByClassName('out_front')[0].style.cssText = 'transform:rotateY(0deg) translateZ(100px)';document.getElementsByClassName('out_back')[0].style.cssText = 'transform:translateZ(-100px) rotateY(180deg)';document.getElementsByClassName('out_left')[0].style.cssText = 'transform:rotateY(90deg) translateZ(100px)';document.getElementsByClassName('out_right')[0].style.cssText = 'transform:rotateY(-90deg) translateZ(100px)';document.getElementsByClassName('out_top')[0].style.cssText = 'transform:rotateX(90deg) translateZ(100px)';document.getElementsByClassName('out_bottom')[0].style.cssText = 'transform:rotateX(-90deg) translateZ(100px)';}
</script>
</body>
</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爱心表白 这是程序员表白系列 ...
最新文章
- 2018AI和机器学习界的12个重大收购案
- “趣冷淡”怎么看？网络电话寻求共同语言
- c将字符串拆分，并存入结构体
- loadrunner 更新中......
- 【Groovy】集合遍历 ( 使用 for 循环遍历集合 | 使用集合的 each 方法遍历集合 | 集合的 each 方法返回值分析 )
- 苹果市值盘中超2万亿美元，从1万亿到2万亿仅用时2年
- java线程池怎么创建_java中的线程池，如何创建？
- 新人报道，写的东西还请大神们多指导！也希望能让和我一样的同事少走弯路。...
- 多线程python实现方式_python多线程的两种实现方式（代码教程）
- docker 我的世界服务器_八个Docker的真实应用场景
- 【LeetCode】剑指 Offer 06. 从尾到头打印链表
- 高清简约家居环境场景设计样机模板素材，还原现场！
- 浅析HTML文档结构对DivCSS布局的意义
- 现在更新鸿蒙会成为小白鼠吗,安卓11.0被停用，鸿蒙OS即将登上，花粉：宁愿当小白鼠...
- 《程序员修炼之道——从小工到专家》（典藏书）
- java entitybuilder_Java MultipartEntityBuilder.setContentType方法代码示例
- SSH三大框架的整合（实例）
- 分布式 HTAP 数据库 ADB PG 架构解析
- 编程c语言黑与白,C语言黑与白问题代码及解析
- 通过虚拟机安装Ubuntu系统到移动硬盘
热门文章
- 营销管理手册_从店长手册入手，推动营销管理大升级
- 共轭梯度法(Conjugate gradient)详解
- 神经网络之激活函数(activation function)
- java magnolia_Web内容管理系统 Magnolia 安装使用-挖掘优良的架构（2）
- linux----文件权限管理
- php 在线更新,Updates.php给自己的主题添加在线更新功能
- 柔性太阳能电池pdf_CIS太阳能电池.pdf
- java私有 公开 保护_性能与设计相关的java中的私有/受保护方法
- mysql常见排错_mysql 一些排错技巧
- 依赖的包_运维丨python安装mysql的依赖包mysqlpython操作