<!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. Python线性表——单链表

    1. 线性表简介 线性表是一种线性结构,它是由零个或多个数据元素构成的有限序列.线性表的特征是在一个序列中,除了头尾元素,每个元素都有且只有一个直接前驱,有且只有一个直接后继,而序列头元素没有直接前驱 ...

  2. git 中文文档 及测试命令

    git 使用官方中文文档 https://git-scm.com/book/zh/v2/ 或者你在github上只填写一个仓库名称点击创建后会跳转一个页面给出参考命令如下 echo "# w ...

  3. 11 安装已集成HA的树莓派镜像Hassbian

    2017-09-04 10:40:47 下载Hassbian镜像文件,浏览https://github.com/home-assistant/pi-gen/releases/tag/v1.23,查看最 ...

  4. CSS3 三次贝塞尔曲线(cubic-bezier)

    例子:transition:all 1s cubic-bezier(.21,.2,.65,.1) 最近在看animation模块,其中animation-timing-function 和 trans ...

  5. 《SQL Server性能调优实战》知识点汇总

    2.4数据库结构的设计 好的性能出自好的设计 尽可能添加数据完整约束(非空约束.默认值约束.CHECK约束.唯一约束.外键约束)等,这些约束的添加将有助于数据库关系引擎分析执行计划. 尽可能小的字段类 ...

  6. Android的ViewPager的学习

    这篇博客是对慕课网上看到的视频里学习到的知识的一些记录,让自己能够加深理解.视频地址:http://www.imooc.com/learn/1116 在这个视频中,目标是实现类似微信的主界面之间的切换 ...

  7. Spring AOP功能和目标

    1.AOP的作用 在OOP中,正是这种分散在各处且与对象核心功能无关的代码(横切代码)的存在,使得模块复用难度增加.AOP则将封装好的对象剖开,找出其中对多个对象产生影响的公共行为,并将其封装为一个可 ...

  8. java-方法重载、参数传递、

    1.Java的方法重载overload:同一个类内,可以有多个同名的方法,只要参数不同即可(包括参数类型和个数.多类型顺序) 2.基本类型(8种:byte\short\int\long\double\ ...

  9. Windows Server 2012 R2服务器部署Tomcat JDK、安装Mysql以及将Java项目部署到CVM

    我们平时所调试的Java Web 项目需要在本地Eclipse或者MyEclipse当中开发调试,并且部署到Tomcat上来测试,比如说笔者这里用的eclipse添加tomcat服务器, 但是这里发布 ...

  10. Visual Studio 2017的一些使用记录

    只要在整个项目组里加一个新的项目,vs就会去自动修改sln文件 新加一个项目的理解为:菜单里 File->New->Project一个项目编译后生成1个dll文件 sln是文本文件只有vs ...