css做旋转相册效果
css做旋转相册效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
background: url(img/bg.jpg) no-repeat;
background-attachment: fixed;
background-size: cover;
}
img{
width: 200px;
height: 300px;
transition: all 1.5s;
}
ul{
width: 200px;
height: 300px;
margin: 250px auto;
/*border: 1px solid;*/
transform-style:preserve-3d;
position: relative;
animation: play 10s infinite linear;
}
@keyframes play{
from{
transform: rotateX(-20deg) rotateY(0deg);
}
to{
transform: rotateX(-20deg) rotateY(360deg);
}
}
ul:hover{
animation-play-state: paused;
}
ul:hover li img{
opacity: .8;
}
ul li:hover img{
opacity: 1;
transform: scale(1.5);
}
ul li{
width: 200px;
height: 300px;
position: absolute;
list-style: none;
}
ul li:nth-child(1){
background-color: pink;
transform: rotateY(60deg) translateZ(300px);
}
ul li:nth-child(2){
background-color: pink;
transform: rotateY(120deg) translateZ(300px);
}
ul li:nth-child(3){
background-color: pink;
transform: rotateY(180deg) translateZ(300px);
}
ul li:nth-child(4){
background-color: pink;
transform: rotateY(240deg) translateZ(300px);
}
ul li:nth-child(5){
background-color: pink;
transform: rotateY(300deg) translateZ(300px);
}
ul li:nth-child(6){
background-color: pink;
transform: rotateY(360deg) translateZ(300px);
}
</style>
</head>
<body>
<ul>
<li><img src="img/m1.jpg"/></li>
<li><img src="img/m2.jpg"/></li>
<li><img src="img/m3.jpg"/></li>
<li><img src="img/m5.jpg"/></li>
<li><img src="img/m6.jpg"/></li>
<li><img src="../../img/mm2.jpg"/></li>
</ul>
</body>
</html>
更多内容请见原文，文章转载自：https://blog.csdn.net/weixin_44519496/article/details/118486620
css做旋转相册效果的更多相关文章
- css做的艺术字效果
Arctext.js 转自 http://tympanus.net/Development/Arctext/
- 解惑：如何使用html+css+js实现旋转相册，立方体相册等动画效果
解惑:如何使用html+css+js实现旋转相册,立方体相册等动画效果 一.前言 最初还是在抖音上看到可以使用简单地代码实现炫酷的网页效果的,但是想要找到可以运行的代码还是比较困难的,最近突然想起就在 ...
- 简单说 用CSS做一个魔方旋转的效果
说明 魔方大家应该是不会陌生的,这次我们来一起用CSS实现一个魔方旋转的特效,先来看看效果图! 解释 我们要做这样的效果,重点在于怎么把6张图片,摆放成魔方的样子,而把它们摆放成魔方的样子,重点在于用 ...
- HTML5 CSS3专题 纯CSS打造相册效果
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/30993277 今天偶然发现电脑里面还有这样的一个例子,感觉效果还不错,不记得啥时 ...
- 纯CSS做3D旋转魔方
昨天偶然看见网友(简单说 用CSS做一个魔方旋转的效果)做的一个3D旋转魔方 效果就是本博客右侧公告栏所示 在这里把做法展现出来 感兴趣的可以试试 做成自己特有的魔方 <!DOCTYPE h ...
- canvas星空背景特效+CSS旋转相册学习
今天在看帖子的时候,看到了个有趣的css旋转相册,刚好之前做了一个星空背景dome,这里给大家分享下代码: 旋转相册参考:https://blog.csdn.net/gitchatxiaomi/art ...
- 纯css做幻灯片效果
css3里面有一个@keyframes动画功能. w3c上面的例子: 可以使用它来做一个幻灯片效果. <!DOCTYPE html> <html lang="en" ...
- 纯CSS3实现常见多种相册效果
本文包含 1.CSS3中2D转换和3D转换的介绍. 2.在相册中的应用实例. CSS3中的转换效果和动画效果十分强大好用,可以实现一些常见的动态效果. 如此一来,CSS3便可以代替许多jQuery的功 ...
- 【CSS】如何用css做一个爱心
摘要:HTML的标签都比较简单,入门非常的迅速,但是CSS是一个需要我们深度挖掘的东西,里面的很多样式属性掌握几个常用的便可以实现很好看的效果,下面我便教大家如何用CSS做一个爱心. 前期预备知识: ...
随机推荐
- VUE(uni-app)+SSM 微信小程序
环境 jdk:1.8.0_181 tomcat:7.0.100 mysql:8.0.25 工具 ideaIU+Hbuilder 遇到的问题 1.需要跳转到注册在tobar中页面时,需使用 uni.sw ...
- QT-notepad++仿写
最近小忙,准备学习下FFMPEG 涉及:工具栏使用,QAction,文件基本读写操作 Github地址:https://github.com/wsdassssss/notepad-
- vue3组合式API
vue3组合式API 为什么要用组合式API,我们来看看它是如何解决vue2的局限性的 1.vue2的局限性 当组件内容越来越多,逻辑越来越复杂,可读性就会降低,并且难以维护. vue2组件采用配置式 ...
- Centos7 搭建 Socks 服务
Centos7 搭建 Socks 服务 一丶拿到一个动态拨号的服务器还不能使用网络得先打开: pppoe-start 二丶安装命令汇总: 通过yum安装ss5 依赖包: yum install gcc ...
- perf性能分析工具使用分享
@ 目录 前言 perf的介绍和安装 perf基本使用 perf list使用,可以列出所有的采样事件 perf stat 概览程序的运行情况 perf top实时显示当前系统的性能统计信息 perf ...
- android软件简约记账app开发day06-将记账条目添加到数据库并且绘制备注页面
android软件简约记账app开发day06-将记账条目添加到数据库并且绘制备注页面 首先写添加到数据库 在DBOpenHelper中添加创建记账表的语句 //创建记账表 sql = "c ...
- 2021.07.19 P2624 明明的烦恼（prufer序列，为什么杨辉三角我没搞出来？）
2021.07.19 P2624 明明的烦恼(prufer序列,为什么杨辉三角我没搞出来?) [P2624 HNOI2008]明明的烦恼 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn ...
- transition 动画过渡
1. html 结构 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...
- Linux下的计划任务—crontab
点击上方"开源Linux",选择"设为星标" 回复"学习"获取独家整理的学习资料! 来自:Linux就该这么学 crond 是linux下用 ...
- 2021 CSP-J复赛 我的备战与游记
目录 备战 2021.10.18 2021.10.19 2021.10.20 2021.10.21 2021.10.22 比赛当日 早上 线下见面 正文 比赛后 赛后总结与讲解 简单总结 Candy ...