<!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. 洛谷.5284.[十二省联考2019]字符串问题(后缀自动机 拓扑 DP)

    LOJ BZOJ 洛谷 对这题无话可说,确实比较...裸... 像dls说的拿拓扑和parent树一套就能出出来了... 另外表示BZOJ Rank1 tql... 暴力的话,由每个\(A_i\)向它 ...

  2. Redhat Linux5.4/5.5/5.8/6.0/6.3 ISO镜像文件下载

    版本有RedHat Enterprise Linux(RHEL)5.4/5.5/5.8/6.0/6.3 ISO镜像文件下载地址: RHEL 5.4 ISO下载http://rhel.ieesee.ne ...

  3. PermissionDispatcher 运行时权限框架

    第一步在app的build.gradle文件中添加: dependencies { // PermissionDispatcher 框架的使用 implementation 'com.github.h ...

  4. SSM的，日常错误

    org.springframework.beans.factory.BeanCreationException: Could not autowire field: private com.imooc ...

  5. tomcat 启动方式

    <?xml version="1.0" encoding="UTF-8"?><Context docBase="wexin" ...

  6. IAB303 Data Analytics Assessment Task

    Assessment TaskIAB303 Data Analyticsfor Business InsightSemester I 2019Assessment 2 – Data Analytics ...

  7. react高阶组件的使用

    为了提高代码的复用在react中我们可以使用高阶组件 1.添加高阶组件 高阶组件主要代码模板HOC.js export default (WrappedComponent) => { retur ...

  8. laravel 控制器类DB类操作

    例子:TrGo表(trgo_chip): laravel框架建立:TrGoModel <?php namespace TrChaos\Model; class TrGoModel extends ...

  9. 2018-2019-2 20165225『网络对抗技术』Exp2：后门原理与实践

    2018-2019-2 20165225『网络对抗技术』Exp2:后门原理与实践 一.实验说明 任务一:使用netcat获取主机操作Shell,cron启动 (0.5分) 任务二:使用socat获取主 ...

  10. 解决python tkinter 与 sleep 延迟问题

    多线程(threading——join) join ()方法:主线程A中,创建了子线程B,并且在主线程A中调用了B.join(),那么,主线程A会在调用的地方等待,直到子线程B完成操作后, 才可以接着 ...