用CSS3把列表项目反转显示
忘了哪儿的一个题目来着,说是把 一个列表 给翻转序列显示,比如 :
有一个列表如图:
翻转为 
回复里面有人机智的使用 CSS3 的 transform:rotate(180deg); 实现了,引发众人赞叹。
其实除了这种方法,还有其他的CSS3属性可以做到。今天在看 张鑫旭的这篇文章 的时候 发现 box-direction:reverse; 这个属性就很适合
废话不说 直接上 DEMO 细心的人可以比对出两种方案效果的差别。
用Chrome 打开,只对Chrome写了前缀。PS: 编写DEMO的时候 利用 pre style, pre script{ display:block;} 再加以格式化 真是好便捷~
结论:CSS3很强大,好多属性可以挖掘,赞别人的解决方案之余别禁锢了自己尝试解决问题的能力。
用CSS3把列表项目反转显示的更多相关文章
- 使用CSS3滤镜让图片反转颜色
CSS提供的滤镜也是一大亮点,我一直痴迷其中,有些滤镜的效果很有用,可是有些的滤镜效果可能只是为了玩玩儿,CSS常见的滤镜有这些:grayscale, blur, sepia,所有常见的过滤器.但是如 ...
- CSS3鼠标悬停图片上浮显示描述代码
效果:http://hovertree.com/texiao/css3/20/ 效果图: 代码如下: <!doctype html> <html lang="zh" ...
- SharePoint 2013 搜索功能,列表项目不能完全被索引
描述 最近一个站点,需要开启搜索功能,然后创建内容源,开始爬网,发现列表里只有一部分被索引,很多项目没有被索引,甚是奇怪,如下图(其实列表里有80几条项目). 首先爬网账号是系统账号.服务器管理员,所 ...
- 在xcode运行编译时,编译成功,但项目中显示缺少该文件,这是只要关闭重启xcode即可。
在xcode运行编译时,编译成功,但项目中显示缺少该文件,这是只要关闭重启xcode即可.
- 基于css3的鼠标经过动画显示详情特效
之前为大家分享过一款基于jquery的手风琴显示详情,今天给大家分享基于css3的鼠标经过动画显示详情特效.这款实例鼠标经过的时候基于中间动画放大,效果非常不错,效果图如下: 在线预览 源码下载 ...
- PyCharm(二)——PyCharm打开本地项目不显示项目文件
一.问题描述 1.1.系统及软件环境 系统:windows10 64位企业版 软件:PyCharm2018.1.4 1.2.问题现象 现象: PyCharm之前一直正常. 从github克隆了一个项目 ...
- Android Studio 点运行启用时,列表中不显示虚拟机,但是实际上在AVD Manager中已经添加了2个虚拟设备了
Android Studio 点运行启用时,列表中不显示虚拟机,但是实际上在AVD Manager中已经添加了2个虚拟设备了 百度上找了一下方法, 情况出现:打开androidstudio,一直连接不 ...
- 夺命雷公狗ThinkPHP项目之----企业网站26之网站前台列表页的显示和完成分页功能
我们用大I接收到我们get过来的栏目页的id然后通过文章的ar_cateid 来判断是不是属于该栏目下的,如果文章表ar_cateid = 栏目表的cate_id 那么就可以选出我们要查找的信息, 然 ...
- Python 列表反转显示方法
第一种,使用reversed 函数,reversed返回的结果是一个反转的迭代器,我们需要对其进行 list 转换 listNode = [1,2,3,4,5] newList = list(reve ...
随机推荐
- eclispe 通过git向码云上传
本文将介绍如何将本地的项目提交到开源中国上去,过程比较详细,实现起来很简单.由于自己也算是一个新手,所以没有做过多的解释,只是单纯的描述了该如何去做. 1.在开源中国上面新建一个空项目 到这里也就结束 ...
- jdbcTemplate in
参考 http://blog.csdn.net/gaopeng0071/article/details/75049952 使用NamedParameterJdbcTemplate public cla ...
- svn: authentication cancelled
从svn 下程序时用户名和密码输入正确后报如图错误! 控制台输出: svn: authentication cancelled svn: authentication cancelled ...
- nyoj528-找球号(三) 【位运算】
http://acm.nyist.net/JudgeOnline/problem.php?pid=528 找球号(三) 时间限制:2000 ms | 内存限制:3000 KB 难度:2 描述 ...
- oracle的dmp数据文件的导出和导入以及创建用户
关于dmp文件我们用的还是比较多的,dmp文件它是作为oracle导入和导出表使用的文件格式,今天就将dmp文件导出和导入进行学习. dmp文件导出 dmp文件导出用的比较多的一般是三种,他们分别是: ...
- 归并排序/合并排序c++实现
#include <iostream>#include<string.h> using namespace std;class merges{public:void merge ...
- 旋转链表(所有元素往右移) rotate list
[抄题]: 给定一个链表,旋转链表,使得每个节点向右移动k个位置,其中k是一个非负数 样例 给出链表1->2->3->4->5->null和k=2 返回4->5-& ...
- memcache简单操作
<?php $m = new Memcache(); $m->connect('localhost',11211); //获取版本 echo "server's version: ...
- HTML5新协议介绍 WebSocket
WebSocket protocol 是HTML5一种新的协议(protocol).它是实现了浏览器与服务器全双工通信(full-duplex). 现在,很多网站为了实现即时通讯(real-time) ...
- Debian 利用 iso 镜像完全离线更新 apt-cdrom
1 目的 在日常的 linux 服务器管理中,出于某些考虑,服务器要求与 Internet 完全隔离. 这使得我们对系统的更新和软件包的升级感到无比头疼. 下面介绍的这种方法,采用 ISO 文件,进行 ...