用CSS3的transform垂直排列日期

废话少说,先上图:

当然了,transform属性目前的ie不支持,但那不关我事.

传说也可以用滤镜解决,具体办法到google搜”css 垂直排列日期”就有了.

rotate是一个使目标旋转的属性,属性值从-180到180都行,可以认为是试一个点绕着圆心转,不过转360也没意义,

目前支持的浏览器有Ff,webkit内核,以及opera

原理很简单,将日期按照”月/日/年”的顺序上下排列,然后旋转年份-90度,再通过translate属性进行位移定位

主要代码如下, demo请点击这里:

.post-date .year{
	-moz-transform: rotate(-90deg) translate(38px, 14px);
	-webkit-transform: rotate(-90deg) translate(39px, 14px);
	-o-transform: rotate(-90deg) translate(39px, 14px);
	transform: rotate(-90deg) translate(39px, 14px);
	font-size: 18px;
	padding: 1px 0 0;
}