忘了哪儿的一个题目来着,说是把 一个列表 给翻转序列显示,比如 :

有一个列表如图: 翻转为 

回复里面有人机智的使用 CSS3 的 transform:rotate(180deg); 实现了,引发众人赞叹。

其实除了这种方法,还有其他的CSS3属性可以做到。今天在看 张鑫旭的这篇文章 的时候 发现 box-direction:reverse;  这个属性就很适合

废话不说 直接上 DEMO  细心的人可以比对出两种方案效果的差别。

用Chrome 打开,只对Chrome写了前缀。PS: 编写DEMO的时候  利用 pre style, pre script{ display:block;} 再加以格式化 真是好便捷~

结论:CSS3很强大,好多属性可以挖掘,赞别人的解决方案之余别禁锢了自己尝试解决问题的能力。

用CSS3把列表项目反转显示的更多相关文章

  1. 使用CSS3滤镜让图片反转颜色

    CSS提供的滤镜也是一大亮点,我一直痴迷其中,有些滤镜的效果很有用,可是有些的滤镜效果可能只是为了玩玩儿,CSS常见的滤镜有这些:grayscale, blur, sepia,所有常见的过滤器.但是如 ...

  2. CSS3鼠标悬停图片上浮显示描述代码

    效果:http://hovertree.com/texiao/css3/20/ 效果图: 代码如下: <!doctype html> <html lang="zh" ...

  3. SharePoint 2013 搜索功能,列表项目不能完全被索引

    描述 最近一个站点,需要开启搜索功能,然后创建内容源,开始爬网,发现列表里只有一部分被索引,很多项目没有被索引,甚是奇怪,如下图(其实列表里有80几条项目). 首先爬网账号是系统账号.服务器管理员,所 ...

  4. 在xcode运行编译时,编译成功,但项目中显示缺少该文件,这是只要关闭重启xcode即可。

    在xcode运行编译时,编译成功,但项目中显示缺少该文件,这是只要关闭重启xcode即可.

  5. 基于css3的鼠标经过动画显示详情特效

    之前为大家分享过一款基于jquery的手风琴显示详情,今天给大家分享基于css3的鼠标经过动画显示详情特效.这款实例鼠标经过的时候基于中间动画放大,效果非常不错,效果图如下: 在线预览   源码下载 ...

  6. PyCharm(二)——PyCharm打开本地项目不显示项目文件

    一.问题描述 1.1.系统及软件环境 系统:windows10 64位企业版 软件:PyCharm2018.1.4 1.2.问题现象 现象: PyCharm之前一直正常. 从github克隆了一个项目 ...

  7. Android Studio 点运行启用时,列表中不显示虚拟机,但是实际上在AVD Manager中已经添加了2个虚拟设备了

    Android Studio 点运行启用时,列表中不显示虚拟机,但是实际上在AVD Manager中已经添加了2个虚拟设备了 百度上找了一下方法, 情况出现:打开androidstudio,一直连接不 ...

  8. 夺命雷公狗ThinkPHP项目之----企业网站26之网站前台列表页的显示和完成分页功能

    我们用大I接收到我们get过来的栏目页的id然后通过文章的ar_cateid 来判断是不是属于该栏目下的,如果文章表ar_cateid = 栏目表的cate_id 那么就可以选出我们要查找的信息, 然 ...

  9. Python 列表反转显示方法

    第一种,使用reversed 函数,reversed返回的结果是一个反转的迭代器,我们需要对其进行 list 转换 listNode = [1,2,3,4,5] newList = list(reve ...

随机推荐

  1. clion register

    1. 使用 activation code 激活 安装完软件后,启动,在要求输入注册码的界面(菜单栏 ⇒ help ⇒ register)选择“License server”输入“http://ide ...

  2. 数字组合 · Combination Sum

    不能重复: [抄题]: 给出一个候选数字的set(C)和目标数字(T),找到C中所有的组合,使找出的数字和为T.C中的数字可以无限制重复被选取. 例如,给出候选数组[2,3,6,7]和目标数字7,所求 ...

  3. swift - VFL

    1.VFL语法总结: //(1)“H”表示水平方向,“V”表示垂直方向 //(2)“|”表示父视图的边界 //(3)“[]”表示这是一个视图UIView的子类,可以组合多个条件,条件用"() ...

  4. [udemy]WebDevelopment_HTML5

    Build Your First Website  装一个subline text HTML default rule tags with opening and closing <!DOCTY ...

  5. Nginx配置杂记(转)

    转至:http://www.cnblogs.com/kuangke/p/5619400.html Nginx是一个高性能的HTTP和反向代理服务器,也是一个IMAP/POP3/SMTP代理服务器,相较 ...

  6. web 批量打印

    批量打印,同时打印多个页面,有两种思路: 第一种思路,将所有的页面内容加载到一个页面中,然后再打印.这种打印方式有几个弊端,页面的样式会丢失,页面太多同时加载到一个页面中,数据量太大,响应时间很长,消 ...

  7. JFinal ORM和Hibernate简要对比

    1.JFinal采用ActiveRecord实现数据库操作支持,较Hibernate开发效率提升六到十倍. 2.JFinal ActiveRecord较Hibernate学习成本低,一小时内能上手开发 ...

  8. Spring框架管理开源的连接池

    1. 管理DBCP连接池 * 先引入DBCP的2个jar包 * com.springsource.org.apache.commons.dbcp-1.2.2.osgi.jar * com.spring ...

  9. PAT 1078 字符串压缩与解压(20)(代码+思路)

    1078 字符串压缩与解压(20 分) 文本压缩有很多种方法,这里我们只考虑最简单的一种:把由相同字符组成的一个连续的片段用这个字符和片段中含有这个字符的个数来表示.例如 ccccc 就用 5c 来表 ...

  10. Santa Claus and a Place in a Class

    /* Santa Claus is the first who came to the Christmas Olympiad, and he is going to be the first to t ...