CSS3_2D转换

最新推荐文章于 2024-09-02 08:53:49 发布

翻译最新推荐文章于 2024-09-02 08:53:49 发布 · 481 阅读

文章标签：

#rotate #translate #scale #skew #matrix

CSS 专栏收录该内容

15 篇文章

订阅专栏

本文详细介绍了CSS3中的2D转换方法，包括旋转、平移、缩放、倾斜和矩阵转换等，并通过示例代码展示了每种方法的具体应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>