您的位置：首页 > Web前端 > CSS

CSS3_2D转换

2016-04-10 21:35 761 查看

CSS3 2D转换 [transform]

2D转换的方法有以下几种：

rotate()

translate()

scale()

skew()

matrix()

rotate方法

旋转(区别于下面的翻转 skew)元素，单位为度数(degree)，正值表示顺时针方向。

顺时针旋转一个区域9度：

<!DOCTYPE html>
<html>
<head>
<style>
div
{
margin:30px;
width:200px;
height:100px;
background-color:yellow;
/* Rotate div */
transform:rotate(9deg);
-ms-transform:rotate(9deg);     /* Internet Explorer */
-moz-transform:rotate(9deg);    /* Firefox */
-webkit-transform:rotate(9deg); /* Safari 和 Chrome */
-o-transform:rotate(9deg);      /* Opera */
}
</style>
</head>
<body>

<div>Hello World</div>

</body>
</html>

translate()方法

在水平、垂直方向平移元素的位置，正值表示向右或向下。

将一个区域向右平移50px，向下平移100px：

<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:75px;
background-color:yellow;
border:1px solid black;
}
div#div2
{
transform:translate(50px,100px);
-ms-transform:translate(50px,100px);     /* IE 9 */
-moz-transform:translate(50px,100px);    /* Firefox */
-webkit-transform:translate(50px,100px); /* Safari and Chrome */
-o-transform:translate(50px,100px);      /* Opera */
}
</style>
</head>
<body>

<div>你好。这是一个 div 元素。</div>

<div id="div2">你好。这是一个 div 元素。</div>

</body>
</html>

scale()方法

按倍数在水平、垂直方向放大元素的大小，元素内的内容也会相应放大(如区域内的字体)。

将一个区域水平方向放大2倍，垂直方向放大4倍：

<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:75px;
background-color:yellow;
border:1px solid black;
}
div#div2
{
margin:100px;
transform:scale(2,4);
-ms-transform:scale(2,4);       /* IE 9 */
-moz-transform:scale(2,4);      /* Firefox */
-webkit-transform:scale(2,4);   /* Safari and Chrome */
-o-transform:scale(2,4);        /* Opera */
}
</style>
</head>
<body>

<div>你好。这是一个 div 元素。</div>

<div id="div2">你好。这是一个 div 元素。</div>

</body>
</html>

skew()方法

绕着x轴、y轴翻转元素，单位为度数(degree)。

将一个元素区域绕x轴翻转30度，绕y轴翻译20度：

<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:75px;
background-color:yellow;
border:1px solid black;
}
div#div2
{
transform:skew(30deg,20deg);
-ms-transform:skew(30deg,20deg);        /* IE 9 */
-moz-transform:skew(30deg,20deg);       /* Firefox */
-webkit-transform:skew(30deg,20deg);    /* Safari and Chrome */
-o-transform:skew(30deg,20deg);         /* Opera */
}
</style>
</head>
<body>

<div>你好。这是一个 div 元素。</div>

<div id="div2">你好。这是一个 div 元素。</div>

</body>
</html>

matrix()方法

此方法将上述的各种转换结成成一起使用，包含6个参数。

使用上不如上述的方法清晰。

更多关于

transform

的信息请参考: transform

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： rotate translate scale skew matrix

相关文章推荐

新的分享

章节导航