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做旋转相册效果的更多相关文章

  1. css做的艺术字效果

    Arctext.js 转自  http://tympanus.net/Development/Arctext/

  2. 解惑：如何使用html+css+js实现旋转相册，立方体相册等动画效果

    解惑:如何使用html+css+js实现旋转相册,立方体相册等动画效果 一.前言 最初还是在抖音上看到可以使用简单地代码实现炫酷的网页效果的,但是想要找到可以运行的代码还是比较困难的,最近突然想起就在 ...

  3. 简单说 用CSS做一个魔方旋转的效果

    说明 魔方大家应该是不会陌生的,这次我们来一起用CSS实现一个魔方旋转的特效,先来看看效果图! 解释 我们要做这样的效果,重点在于怎么把6张图片,摆放成魔方的样子,而把它们摆放成魔方的样子,重点在于用 ...

  4. HTML5 CSS3专题 纯CSS打造相册效果

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/30993277 今天偶然发现电脑里面还有这样的一个例子,感觉效果还不错,不记得啥时 ...

  5. 纯CSS做3D旋转魔方

    昨天偶然看见网友(简单说 用CSS做一个魔方旋转的效果)做的一个3D旋转魔方  效果就是本博客右侧公告栏所示 在这里把做法展现出来 感兴趣的可以试试  做成自己特有的魔方 <!DOCTYPE h ...

  6. canvas星空背景特效+CSS旋转相册学习

    今天在看帖子的时候,看到了个有趣的css旋转相册,刚好之前做了一个星空背景dome,这里给大家分享下代码: 旋转相册参考:https://blog.csdn.net/gitchatxiaomi/art ...

  7. 纯css做幻灯片效果

    css3里面有一个@keyframes动画功能. w3c上面的例子: 可以使用它来做一个幻灯片效果. <!DOCTYPE html> <html lang="en" ...

  8. 纯CSS3实现常见多种相册效果

    本文包含 1.CSS3中2D转换和3D转换的介绍. 2.在相册中的应用实例. CSS3中的转换效果和动画效果十分强大好用,可以实现一些常见的动态效果. 如此一来,CSS3便可以代替许多jQuery的功 ...

  9. 【CSS】如何用css做一个爱心

    摘要:HTML的标签都比较简单,入门非常的迅速,但是CSS是一个需要我们深度挖掘的东西,里面的很多样式属性掌握几个常用的便可以实现很好看的效果,下面我便教大家如何用CSS做一个爱心. 前期预备知识: ...

随机推荐

  1. 12-factors

    12-factors 官方网址 The Twelve-Factor App 简介 如今,软件通常会作为一种服务来交付,它们被称为网络应用程序,或软件即服务(SaaS).12-Factor 为构建如下的 ...

  2. 帝国cms7.5忘记登录密码以及多次登录失败被锁定终极解决办法

    其实网上很多忘记登录密码的解决方法都是相对于7.5版本以下的,在7.5的版本里根本不适用,今天小编主要给大家说的是针对帝国cms7.5忘记登录密码正确的解决办法. 前提是你能登陆服务器: 一.忘记登录 ...

  3. 黑客入门——渗透必备神器Burpsuit的安装和简单使用教程

    ​ 很多人没有听说过burp全称(BurpSuite)BurpSuite是一款白帽子,黑帽子渗透测试必备工具,通过拦截HTTP/HTTPS的web数据包,当浏览器和相关应用程序的中间人,进行拦截.修改 ...

  4. 开源框架YiShaAdmin如何使用任务计划

    1.在Startup添加 new JobCenter().Start();(红色字体,下同) // This method gets called by the runtime. Use this m ...

  5. HMS Core Discovery第14期回顾长文|纵享丝滑剪辑，释放视频创作力

    HMS Core Discovery第14期直播<纵享丝滑剪辑,释放视频创作力>,已于4月21日圆满结束,本期直播我们同HMS Core视频编辑服务(Video Editor Kit)的产 ...

  6. 尤娜故事-迷雾-springboot扮酷小技巧

    前情回顾 从前,有一个简单的通道系统叫尤娜-- 尤娜系统的第一次飞行中换引擎的架构垂直拆分改造 四种常用的微服务架构拆分方式 尤娜,我去面试了 正文 我回到日常的尤娜系统建设中,最近事情比较少,总有一 ...

  7. springmvc04-数据处理

     数据处理 我们把它分为三种情况来分析,这样我们对于数据处理会有更好的理解 1.提交的域名称和处理方法的参数名一致 提交数据 : http://localhost:8080/hello?name=xi ...

  8. 简单几步解决ie打不开闪退的问题 亲测有效

    起因: 银行U盾插入 IE自动打开银行门户网站 打不开 闪退 不插入之后 IE还是闪退, 修复之法 清除IE扩展 一些自己安装的扩展或是被恶意安装的扩展插件会导致IE无法启动 1. 按住windows ...

  9. 『现学现忘』Git基础 — 19、Git中忽略文件

    目录 1.忽略文件说明 2.忽略文件的原则 3..gitignore忽略规则 1.忽略文件说明 有些时候,你必须把某些文件放到Git工作目录中,但又不能提交它们到本地版本库,通常都是些自动生成的文件. ...

  10. Linux中文件/文件系统的压缩、打包和备份总结（基于rhel7）

    文件/文件系统的压缩.打包 Linux有哪些压缩工具可供选择 按压缩比:xz>bzip2>gzip,按压缩时长:gzip>bzip2>xz,另外还有zip可以选择. gzip只 ...