![[文字竖排]CSS3中的transform变形详解](https://www.icz.com/wp-content/themes/modown/static/img/thumbnail.png)
当我们制作数据表时，我们会遇到数字垂直排列的问题。直接使用writing直接解决IE下的问题-mode:tb-rl;然而，FF、谷歌和其他浏览器都没有效果，但由于CSS3，文本或图像的旋转、缩放、倾斜和移动可以通过Transform功能实现，这四种变形分别使用rotatetee、 scale、实现skew和translate四种方法。结合这四种变形，会产生不同的效果，使用顺序不同，效果也不同。结合这四种变形，会产生不同的效果，使用顺序不同，效果也不同。
浏览器目前的支持：Safari 3.1 、 Chrome 8 、Firefox 4 、Opera 10 、IE9
一、旋转：
使用CSSrotate该方法实现元素的旋转，并在参数中添加角度值。旋转方法是顺时针旋转。
例一：在样式代码中使用黄色div元素“transform: rotate(45deg)语句使div元素顺时针旋转45度。deg是CSS3的“Values and Units模块中定义的角度单位。
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″ />
<title>Transform旋转</title>
<style>
div {
font:12px Arial, Helvetica, sans-serif;
width: 300px;
margin: 150px auto;
background-color: yellow;
text-align: center;
writing-mode:tb-rl;
-webkit-transform: rotate(90deg); /* for Chrome || Safari */
-moz-transform: rotate(90deg); /* for Firefox */
-ms-transform: rotate(90deg); /* for IE */
-o-transform: rotate(90deg); /* for Opera */
}
</style>
</head>
<body>
<div>2.2412421</div>
</body>
</html>
评论0