<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style type="text/css">
.img{
width:1200px;
height:300px;
border:1px solid red;
margin:auto;
}
li{
list-style:none;
float:left;
margin-left:15px;
-webkit-transform-style:preserve-3d;-webkit-transition:1.5s;
-moz-transform-style:preserve-3d;-moz-transition:1.5s;
}

li:hover{
-webkit-transform:rotateY(180deg);
-moz-transform:rotateY(180deg);
}
</style>
<body>
<ul class="img">
<li><img src="data:images/img1.jpg"></li>
<li><img src="data:images/img2.jpg"></li>
<li><img src="data:images/img3.jpg"></li>
<li><img src="data:images/img4.jpg"></li>
</ul>
</body>
</html>

css3简单旋转的更多相关文章

  1. 【微信支付】分享一个失败的案例 跨域405(Method Not Allowed)问题 关于IM的一些思考与实践 基于WebSocketSharp 的IM 简单实现 【css3】旋转倒计时 【Html5】-- 塔台管制 H5情景意识 --飞机 谈谈转行

    [微信支付]分享一个失败的案例 2018-06-04 08:24 by stoneniqiu, 2744 阅读, 29 评论, 收藏, 编辑 这个项目是去年做的,开始客户还在推广,几个月后发现服务器已 ...

  2. css3制作旋转动画

    现在的css3真是强大,之前很多动画都是用jq来实现,但是css3制作的动画要比jq实现起来简单很多,今天呢,我自己也写了一个css旋转动画和大家分享.效果如下面的图片 思路:1.制作之前呢,我们先来 ...

  3. css3简单几步画一个乾坤图

    原文:[原创]css3简单几步画一个乾坤图 效果如上,鼠标移上去会有动画. 代码如下非常简单: <html> <head> <style> .outer{heigh ...

  4. CSS3制作旋转导航

    慕课网学习CSS3时,遇到个习题,觉得有必要总结学习下:CSS3制作旋转导航 慕课网习题地址:http://www.imooc.com/code/1883 示例及源码地址:http://codepen ...

  5. CSS3动画旋转——（图片360°旋转）

    今天在重构网页特效的时候,想着用到一个css3的旋转特效.简单来一个demo. html <div class="box"> <img src="./y ...

  6. 纯css3实现旋转的太极图

    效果图: 代码如下: <!DOCTYPE html> <html> <head lang="zh"> <meta charset=&quo ...

  7. CSS3实现旋转的太极图（二）：只用1个DIV

    效果预览:   PS: 1.昨天用3个DIV实现了太极图(点击查看),,今天试着用1个Div来做. 2.公司刚忙过双10周年庆,最近空闲下来,闲着也是闲着,总得写点东西吧. 3.高手莫喷,小弟仅仅是没 ...

  8. CSS3绘制旋转的太极图案（一）

        实现步骤: 基础HTML: <div class="box-taiji"> <div class="circle-01">< ...

  9. 用css3制作旋转加载动画的几种方法

    以WebKit为核心的浏览器,例如Safari和Chrome,对html5有着很好的支持,在移动平台中这两个浏览器对应的就是IOS和Android.最近在开发一个移动平台的web app,那么就有机会 ...

随机推荐

  1. Dubbo源码阅读顺序

    转载: https://blog.csdn.net/heroqiang/article/details/85340958 Dubbo源码解析之配置解析篇,主要内容是<dubbo:service/ ...

  2. Mac OS X系统 用dd命令将iso镜像写入u盘

    一. Mac下将ISO写入U盘可使用命令行工具dd,操作如下: 1.找出U盘挂载的路径,使用如下命令:diskutil list2.将U盘unmount(将N替换为挂载路径):diskutil unm ...

  3. 先 FROM 后 WHERE 再 GROUP BY 再 SELECT 再 order BY

    shutdown -r -t 5office:515740906family-asus:786512915office-T420i:837829568 family-T420:868 638 325 ...

  4. RedHat 7.0更新升级openSSH7.4p1

    由于目前服务器上ssh版本较低,存在安全漏洞,需要升级到最新版本. 系统版本:RedHat 7.0 旧openSSH版本:6.4p1 新openSSH版本:7.4p1 升级方式:源码安装 安装操作步骤 ...

  5. java判断是否是数字

    1.用JAVA自带的函数 public static boolean isNumeric(String str){ for (int i = 0; i < str.length(); i++){ ...

  6. STS（eclipse）3.7.3新建项目报错：org.apache.maven.archiver.MavenArchiver.getManifest(org.apache.maven.project.MavenProject, org.apache.maven.archiver.MavenArchiveConfiguration)

    烦人的版本兼容问题 没有使用sts3.7.3系统内嵌的maven3.3.3,调整为稍高版本的maven3.5.2,懒得修改配置了. 升级eclipse插件吧. Eclipse,Help -> I ...

  7. 基于maven构建javaweb项目思路梳理及改进

    需要准备的东西: Jdk. myeclipse. maven包 预装jdk环境 1.maven安装及配置: a)      详见url https://www.cnblogs.com/eagle668 ...

  8. phpexcel获取excel表格内容

    excel表格式: 代码: $objPHPExcel=PHPExcel_IOFactory::load($excelFilePath);//$file_url即Excel文件的路径 $sheet=$o ...

  9. python的if条件判断

    python的条件判断书写格式: 基本格式 if 条件判断:    #条件判断通过,则执行下面的语句 执行语句 执行语句 ... else:    #条件判断不通过,则执行下面的语句 执行语句 执行语 ...

  10. js学习（5）语法专题

    Js是一种动态类型语言,变量没有类型限制,可以随时赋值 强制转换: 主要指使用Number(),String()和Boolean()三个函数,手动将各个类型的值,分别转换为数字,字符串或布尔值 Num ...