<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>旋转菜单</title>
    <link rel="stylesheet" href="style6.css" type="text/css">
</head>
<body>
<div>
    <ul>
        <li><a href="#"><img src="imges/gh1.jpg"></a></li>
        <li><a href="#"><img src="imges/gh2.jpg"></a></li>
        <li><a href="#"><img src="imges/gh3.jpg"></a></li>
        <li><a href="#"><img src="imges/gh4.jpg"></a></li>
        <li><a href="#"><img src="imges/gh5.jpg"></a></li>
        
        <li><a href="#"><img src="imges/gh1.jpg"></a></li>
        <li><a href="#"><img src="imges/gh2.jpg"></a></li>
        <li><a href="#"><img src="imges/gh3.jpg"></a></li>
        <li><a href="#"><img src="imges/gh4.jpg"></a></li>
        <li><a href="#"><img src="imges/gh5.jpg"></a></li>
        
        <li><a href="#"><img src="imges/gh1.jpg"></a></li>
        <li><a href="#"><img src="imges/gh2.jpg"></a></li>
        <li><a href="#"><img src="imges/gh3.jpg"></a></li>
        <li><a href="#"><img src="imges/gh4.jpg"></a></li>
        <li><a href="#"><img src="imges/gh5.jpg"></a></li>
        
    </ul>    
</div>
</body>
</html>

img{
    width: 50px;
    height: 150px;
    border: groove orange;
}
ul{
    margin-top: 150px;
    list-style-type: none;

}
li{
    float: left;
    transform-origin: left top;
    transform: rotate(10deg);
    transition: all 1s ease;
}

li:nth-child(2n){
    transform: rotate(15deg);
}

li:nth-child(3n){
    transform: rotate(-25deg);
}

li:nth-child(4n){
    transform: rotate(30deg);
}
li:nth-child(5n){
    transform: rotate(-20deg);
}

li:hover{
    position: relative;
    z-index: 200;
    transform: rotate(0deg) scale(3);
}
div{
    width: 800px;
    height: 600px;
    background: rgba(0,0,0,0.2) url(imges/hl.jpg) no-repeat;
    background-size: cover;
    padding: 20px;
    margin-left: auto;
    margin-right: auto;
}

html5 css练习 画廊 元素旋转的更多相关文章

  1. 读书笔记：《HTML5开发手册》--HTML5新的结构元素

    读书笔记:<HTML5开发手册> (HTML5 Developer's CookBook) 虽然从事前端开发已有很长一段时间,对HTML5标签也有使用,但在语义化上面理解还不够清晰.之前在 ...

  2. html5网页动画总结--jQuery旋转插件jqueryrotate

    CSS3 提供了多种变形效果,比如矩阵变形.位移.缩放.旋转和倾斜等等,让页面更加生动活泼有趣,不再一动不动.然后 IE10 以下版本的浏览器不支持 CSS3 变形,虽然 IE 有私有属性滤镜(fil ...

  3. 【原】无脑操作：HTML5 + CSS + JavaScript实现比赛排程

    1.背景:朋友请帮忙做一个比赛排程软件 2.需求: ① 比赛人数未知,可以通过文本文件读取参赛人员名称: ② 对参赛人员随机分组,一组两人,两两PK,如果是奇数人数,某一个参赛人员成为幸运儿自动晋级: ...

  4. 【Demo】CSS3元素旋转、缩放、移动或倾斜

    CSS3元素旋转.缩放.移动或倾斜 代码: <!DOCTYPE html> <html lang="en"> <head> <meta c ...

  5. HTML5之新增的元素和废除的元素 （声明：内容节选自《HTML 5从入门到精通》）

    新增结构元素: section元素 section元素定义文档或应用程序中的一个区段,比如章节.页眉.页脚或文档中的其他部分.它可以与h1,h2,h3,h4,h5,h6元素结合起来使用,标示文档结构. ...

  6. No.5 - 纯 CSS 制作绕中轴旋转的立方体

    body{ background-color: #000; margin:; padding:; } main{ perspective: 800px; } .cube{ transform-styl ...

  7. HTML5&CSS挑战

    地址:https://www.w3cschool.cn/codecamp/list?pename=html5_and_css_camp 开始学习HTML标签:欢迎来到编程训练营的第一个编程挑战!你可以 ...

  8. HTML5 & CSS初学者教程（详细、通俗易懂）

    前端语言基础:HTML5 & CSS (一) HTML5:超文本标记语言 (1) 基本概念 是由一系列成对出现的元素标签(标记)嵌套组合而成 ( XML也是标签构成的 ) 这些标签以的形式出现 ...

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

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

随机推荐

  1. 洛谷.3733.[HAOI2017]八纵八横(线性基 线段树分治 bitset)

    LOJ 洛谷 最基本的思路同BZOJ2115 Xor,将图中所有环的异或和插入线性基,求一下线性基中数的异或最大值. 用bitset优化一下,暴力的复杂度是\(O(\frac{qmL^2}{w})\) ...

  2. 潭州课堂25班：Ph201805201 tornado 项目 第十二课 项目部署（课堂笔记）

    运行多个Tornado实例 网页响应不是特别的计算密集型处理 多个实例充分利用 CPU 多端口怎么处理 Linux 常见应用服务配置模式 nginx 和 supervisord:采用主配置文件 + 项 ...

  3. 16重新安装HA0.63

    2018-02-24 14:17:46 https://home-assistant.io/docs/installation/raspberry-pi/首先安装2017-11-29-raspbian ...

  4. JS _函数作用域及变量提升

    虽然看了多次js函数作用域及变量提升的理论知识,但也是一知半解~ 这几天做了几道js小题,对这部分进行了从新的理解,还是有所收获的~ 主要参考书籍: <你不知道的JavaScript(上卷)&g ...

  5. [LeetCode] Expressive Words 富于表现力的单词

    Sometimes people repeat letters to represent extra feeling, such as "hello" -> "he ...

  6. 创建zookeeper集群

    第一步:需要安装jdk环境. 第二步:把zookeeper的压缩包上传到服务器. 第三步:解压缩. 第四步:把zookeeper复制三份. [root@localhost ~]# mkdir /usr ...

  7. request之额外路径

    谈到额外路径 ,首先要明白映射路径,映射路径是servlet处理的路径,在web.xml中配置.比如配置一个/emp的映射路径,意味着客户端可以通过http:+项目路径+/emp访问服务器的项目,而所 ...

  8. 关于Spring事物的面试题

    https://blog.csdn.net/h294590501/article/details/80386000 数据库事务和Spring事务是一般面试都会被提到,很多朋友写惯了代码,很少花时间去整 ...

  9. JAVA RPC（一）RPC入门

    为什么要写这个RPC 市面上常见的RPC框架很多,grpc,motan,dubbo等,但是随着越来越多的元素加入,复杂的架构设计等因素似使得这些框架就想spring一样,虽然号称是轻量级,但是用起来却 ...

  10. MongoDB - Indexes

    #explain command pp db[:zips].find(:state => 'MD').explain #List all indexes: db[:zips].indexes.e ...