×

[文字竖排]CSS3中的transform变形详解

作者:Terry2012.09.07来源:Web前端之家浏览:26714评论:1

在我们做数据表格的时候,会遇到数字竖排问题,在IE下面好解决直接用writing-mode:tb-rl;即可,但是在FF,谷歌等浏览器没有效果,但是自从有了CSS3,用Transform功能可以实现文字或图像的旋转、缩放、倾斜、移动这四种类型的变形,这四种变形分别使用rotate、 scale、skew和translate这四种方法来实现。将这四种变形结合使用,就会产生不同的效果,使用顺序不同,产生的效果是不一样的。

目前浏览器支持情况:Safari 3.1+、 Chrome 8+、Firefox 4+、Opera 10+、IE9+

  一、旋转:

  CSS中使用rotate方法来实现对元素的旋转,在参数中加入角度值,旋转方式为顺时针旋转。

  例一:一个黄色的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>

就这样,基本所有浏览器都可以支持文字竖排,怎么样,很简单把,哈哈!!!

您的支持是我们创作的动力!
温馨提示:本文作者系Terry ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://www.jiangweishan.com/article/%5B%E6%96%87%E5%AD%97%E7%AB%96%E6%8E%92%5DCSS3%E4%B8%AD%E7%9A%84transform%E5%8F%98%E5%BD%A2%E8%AF%A6%E8%A7%A3.html

网友评论文明上网理性发言已有1人参与

发表评论:

评论列表