<!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. 2019-2-20Sqlserver数据库中char、varchar、nchar、nvarchar的区别及查询表结构

    varchar 和 nvarchar区别: varchar(n)长度为 n 个字节的可变长度且非 Unicode 的字符数据.n 必须是一个介于 1 和 8,000 之间的数值.存储大小为输入数据的字 ...

  2. python移植环境

    如果整理材料的时候或者给别人共享代码的时候,除了使用docker外,也可以使用pip或者conda生成依赖项文件,然后在其他机器上将该依赖项一一安装就可以了. 但是有很多版本的依赖导致使用pip总是安 ...

  3. Hadoop错误之namenode宕机的数据恢复

    情景再现: 在修复hadoop集群某一个datanode无法启动的问题时,搜到有一个答案说要删除hdfs-site.xml中dfs.data.dir属性所配置的目录,再重新单独启动该datanode即 ...

  4. priority_queue和sort应用

    #include"iostream" #include"String" #include"stdio.h" #include "s ...

  5. C# int[,] 和 int[][]

    int[] 一维数组 int[,]  二维数组 int[] []  交错数组 又称“数组的数组” 一维数组声明与初始化 声明: int[] a = new int[]; 声明与初始化: int arr ...

  6. amoeba实现读写分离

    amoeba的运行环境依靠java的jdk: 下面执行amoeba的安装不走 # mkdir /usr/local/src/amoeba 上传文件:amoeba-mysql-binary-2.2.0. ...

  7. Tinker 热修复

    集成方式: 第一步:在project  build.gradle 文件中添加: dependencies { // Tinker classpath("com.tinkerpatch.sdk ...

  8. vue数据变化的监控是如何做到的

    mvvm框架里的数据监控对象,包括 基本数据类型和对象, 对象分为对象和数组. 首先是对普通数据类型和对象的监控.其次是对数组的监控. 对对象的监控需要用到递归; <!DOCTYPE html& ...

  9. go 并发编程(3)

    channel go语言提供的消息通信机制被称为channel. "不要通过共享内存来通信,而应该通过通信来共享内存". channel是go语言在语言级别提供的goroutine ...

  10. vue中路由懒加载实现amd加载文件

    一般我们配置路由的时候是import引入: import log from '@/components/login': { path: '/login', component: log , hidde ...