<!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. linux（ubuntu） 安装composer（PHP用来管理依赖关系的工具 ） 和安装中国全量镜像

    https://www.phpcomposer.com/  composer中文网 1:进入安装目录   cd /usr/local/bin 2:下载并安装     sudo curl -s http ...

  2. C#创建ActiveX

    因为最近的项目可能会用到调用外部设备,读取信息.为了和现有的BS系统兼容,并以较小的代价满足需求,于是想到了使用ActiveX技术(也有人建议使用Silverlight),这技术虽然比较早了,但还是能 ...

  3. Python字符串的相关操作

    1.大小写转换 判断字符串 s.isalnum() #所有字符都是数字或者字母 s.isalpha() #所有字符都是字母 s.isdigit() #所有字符都是数字 s.islower() #所有字 ...

  4. Promise 用法

    Promise是一个构造函数,自己身上有all.reject.resolve这几个眼熟的方法,原型上有then.catch等同样很眼熟的方法. 那就new一个 Promise的构造函数接收一个参数,是 ...

  5. python模拟---注册登陆查看个人信息

    需求:1.模拟注册: 2.模拟登陆: 3.模拟登陆成功显示登陆成功的用户账号: 一.注册 代码如下: def regetist(): ''' :param username: 注册的账号 :param ...

  6. Web Service学习（一）

    1.WebMethod特性包含哪些属性,都有什么用? 1.BufferResponse属性 该属性表明是否启用对Web Service方法响应的缓冲.当设置为true时,Web Service方法将响 ...

  7. linux安装杀毒软件

    https://www.cnblogs.com/bingo1024/p/9018212.html

  8. 虚拟机下hadoop1.1.2安装（单机版）与（集群版）

    (1)我的电脑环境 CentOS6.5,64位,在虚拟机下实现. (2)jdk1.6的安装 jdk我用的是1.6.0_27,自己在网上下载jdk-6u27-linux-x64.zip 先在/usr/l ...

  9. Exp2 后门原理与实践 20164320 王浩

    一.实践基本内容 1.实践目标 (1)使用netcat获取主机操作Shell,cron启动 (2)使用socat获取主机操作Shell, 任务计划启动 (3)使用MSF meterpreter(或其他 ...

  10. js自定义格式化时间戳的格式

    题目为 : 写一个模块,外部调用这个模块,请求参数是时间戳,模块要求 今天的时间,统一用24小时写作 03:00.15:04 昨天的时间,统一写昨天 昨天之前的时间,但在本周之内的时间,统一用周一.周 ...