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

有一个列表如图: 翻转为 

回复里面有人机智的使用 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. sql server 数据库学习

    http://m.blog.csdn.net/anxpp/article/details/51295020

  2. Python3 enumerate() 函数

    Python3 enumerate() 函数  Python3 内置函数 描述 enumerate() 函数用于将一个可遍历的数据对象(如列表.元组或字符串)组合为一个索引序列,同时列出数据和数据下标 ...

  3. Java Tomcat下载、安装和环境变量配置

    win10下Tomcat的下载.安装和环境变量的配置 -----made by siwuxie095                             1.首先到Tomcat官网,传送阵:点击开 ...

  4. tcp连接需要注意的问题

    当有子进程时,子进程终止时会返回SIGCHLD信号,默认忽略,此时会有僵尸进程. 处理方法: 捕获信号,并waitpid. 当慢系统调用被中断时(如信号中断),有些系统不会自动重启调用,此时系统调用可 ...

  5. manacher最长回文序列c++

    算法真心读不懂 #include <iostream>#include<string>#include<cstring> using namespace std;c ...

  6. [leetcode]215. Kth Largest Element in an Array 数组中第k大的元素

    Find the kth largest element in an unsorted array. Note that it is the kth largest element in the so ...

  7. oracle基本查询入门(一)

    一.基本select语句 SELECT *|{[DISTINCT] column|expression [alias], ...} FROM table; 例如: --查询所有数据 select * ...

  8. 设置 svn 与 web线上同步

    默认你已经配置好了svn服务 1.假设我们的线上网站目录为:/data/www/xxx 2.假设svn的仓库目录为:/data/svn/repo 一.checkout一份svn到线上网站目录 svn ...

  9. springmvc中Controller方法的返回值

    1.1 返回ModelAndView controller方法中定义ModelAndView对象并返回,对象中可添加model数据.指定view. 1.2 返回void 在controller方法形参 ...

  10. windows下用tcc编译Lua

    脚本来源:Demon's Blog,http://demon.tw/software/compile-lua-with-tcc.html 版权归原作者所有 使用方法: 1.下载tcc编译器,本文解压目 ...