CSS3 基础（005_2D 变换）

最新推荐文章于 2025-05-05 14:03:20 发布
最新推荐文章于 2025-05-05 14:03:20 发布
阅读量1k 收藏
点赞数
分类专栏： CSS 文章标签： css3
本文详细介绍了CSS3中的2D变换方法，包括translate()、rotate()、scale()、skewX()、skewY()及matrix()等，通过实例展示了如何使用这些方法来改变元素的位置、旋转角度、大小和倾斜度。

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

原始网址：http://www.w3schools.com/css/css3_2dtransforms.asp

翻译：

CSS3 2D 变换（CSS3 2D Transforms）

CSS3 变换（CSS3 Transforms）

CSS3 变换允许你对元素进行移动（translate）、旋转（rotate）、伸缩（scale）、倾斜（skew）。
变换效果是，让元素改变形状、大小和位置。
CSS3 支持 2D 和 3D 变换。
将鼠标指针移至以下元素，查看 2D 和 3D 变换的区别：
CSS3 变换

<!DOCTYPE html>
<html lang="en-US">
<head>
<title>CSS3 2D Transforms</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#rotate2D, #rotate3D {
    width: 80px;
    height: 70px;
    color: white;
    position: relative;
    font-weight: bold;
    font-size: 15px;
    padding: 10px;
    float: left;
    margin-right: 50px;
    border-radius: 5px;
    border: 1px solid #000000;
    background: red;
    margin: 10px;
}
</style>
<script>
    var x, y, n = 0, ny = 0, rotINT, rotYINT;
    function rotateDIV() {
        x = document.getElementById("rotate2D");
        clearInterval(rotINT);
        rotINT = setInterval("startRotate()", 10);
    }
    function rotateYDIV() {
        y = document.getElementById("rotate3D");
        clearInterval(rotYINT);
        rotYINT = setInterval("startYRotate()", 10);
    }
    function startRotate() {
        n = n + 1;
        x.style.transform = "rotate(" + n + "deg)";
        x.style.webkitTransform = "rotate(" + n + "deg)";
        x.style.OTransform = "rotate(" + n + "deg)";
        x.style.MozTransform = "rotate(" + n + "deg)";
        if (n == 180 || n == 360) {
            clearInterval(rotINT);
            if (n == 360) {
                n = 0;
            }
        }
    }
    function startYRotate() {
        ny = ny + 1;
        y.style.transform = "rotateY(" + ny + "deg)";
        y.style.webkitTransform = "rotateY(" + ny + "deg)";
        y.style.OTransform = "rotateY(" + ny + "deg)";
        y.style.MozTransform = "rotateY(" + ny + "deg)";
        if (ny == 180 || ny >= 360) {
            clearInterval(rotYINT);
            if (ny >= 360) {
                ny = 0;
            }
        }
    }
</script>
</head>
<body>
    <div style="height: 80px;">
        <div onmouseover="rotateDIV()" id="rotate2D">2D rotate</div>
        <div onmouseover="rotateYDIV()" id="rotate3D">3D rotate</div>
    </div>
</body>
</html>

Browser Support for 2D Transforms

表格里的数字代表对 CSS3 属性全面支持的各浏览器的第一个版本号。
数字之后跟从 -ms-、-webkit-、-moz- 或 -o- 指定带前缀工作的第一个版本号。

属性（Property）chromeIEfirefoxsafariopera
transform36.0
4.0 -webkit-		10.0
9.0 -ms-		16.0
3.5 -moz-		9.0
3.2 -webkit-		23.0
15.0 -webkit-
12.1
10.5 -o-
transform-origin(two-value syntax)36.0
4.0 -webkit-		10.0
9.0 -ms-		16.0
3.5 -moz-		9.0
3.2 -webkit-		23.0
15.0 -webkit-
12.1
10.5 -o-

CSS3 2D 变换（CSS3 2D Transforms）

在本章，你将学习以下 2D 变换方法：

  • translate()
  • rotate()
  • scale()
  • skewX()
  • skewY()
  • matrix()
提示：你将在下一章节学习到 3D 变换的内容。

translate() 方法（The translate() Method）

transform_translate.gif

translate() 方法用以移动元素的当前位置（根据所传参数，相对 X 轴、Y 轴移动）。
下列示例将移动 <div> 元素相对当前位置向右 50 像素、向下 100 像素：

div {
    -ms-transform: translate(50px, 100px); /* IE 9 */
    -webkit-transform: translate(50px, 100px); /* Safari */
    transform: translate(50px, 100px);
}

translate() 方法

<!DOCTYPE html>
<html>
<head>
<style>
div {
    width: 300px;
    height: 100px;
    background-color: yellow;
    border: 1px solid black;
    -ms-transform: translate(50px, 100px); /* IE 9 */
    -webkit-transform: translate(50px, 100px); /* Safari */
    transform: translate(50px, 100px); /* Standard syntax */
}
</style>
</head>
<body>
    <div>
        The translate() method moves an element from its current
        position. This div element is moved 50 pixels to the right, and 100 pixels down from its current position.
    </div>
</body>
</html>

rotate() 方法（The rotate() Method）

rotate() 方法

rotate() 方法将根据给定的度数顺时针或逆时针旋转元素。
下列示例对 <div> 元素顺时针旋转 20 度：

div {
    -ms-transform: rotate(20deg); /* IE 9 */
    -webkit-transform: rotate(20deg); /* Safari */
    transform: rotate(20deg);
}

rotate() 方法

<!DOCTYPE html>
<html>
<head>
<style>
div {
    width: 300px;
    height: 100px;
    background-color: yellow;
    border: 1px solid black;
}

div#myDiv {
    -ms-transform: rotate(20deg); /* IE 9 */
    -webkit-transform: rotate(20deg); /* Safari */
    transform: rotate(20deg); /* Standard syntax */
}
</style>
</head>
<body style="margin: 20px;">
    <div>This a normal div element.</div>
    <div id="myDiv">The rotate() method rotates an element clockwise or counter-clockwise. This div element is rotated clockwise 20 degrees.</div>
</body>
</html>

使用负值将使元素逆时针旋转。
下列示例对 <div> 元素逆时针旋转 20 度：

div {
    -ms-transform: rotate(-20deg); /* IE 9 */
    -webkit-transform: rotate(-20deg); /* Safari */
    transform: rotate(-20deg);
}

rotate() 方法

<!DOCTYPE html>
<html>
<head>
<style>
div {
    width: 300px;
    height: 100px;
    background-color: yellow;
    border: 1px solid black;
}

div#myDiv {
    -ms-transform: rotate(-20deg); /* IE 9 */
    -webkit-transform: rotate(-20deg); /* Safari */
    transform: rotate(-20deg); /* Standard syntax */
}
</style>
</head>
<body style="margin: 20px;">
    <div>This a normal div element.</div>
    <div id="myDiv">
        The rotate() method rotates an element clockwise
        or counter-clockwise. This div element is rotated counter-clockwise with 20 degrees.
    </div>
</body>
</html>

scale() 方法（The scale() Method）

scale() 方法增大或减小元素的尺寸（根据所传的参数：宽、高）。
下列示例为增大 <div> 元素的宽高，宽比之增大为原来的 2 倍，高比之增大为原来的 3 倍：

div {
    -ms-transform: scale(2, 3); /* IE 9 */
    -webkit-transform: scale(2, 3); /* Safari */
    transform: scale(2, 3);
}

scale() 方法

<!DOCTYPE html>
<html>
<head>
<style>
div {
    margin: 150px;
    width: 200px;
    height: 100px;
    background-color: yellow;
    border: 1px solid black;
    border: 1px solid black;
    -ms-transform: scale(2, 3); /* IE 9 */
    -webkit-transform: scale(2, 3); /* Safari */
    transform: scale(2, 3); /* Standard syntax */
}
</style>
</head>
<body>
    <p>The scale() method increases or decreases the size of an element.</p>
    <div>This div element is two times of its original width, and three times of its original height.</div>
</body>
</html>

下列示例将 <div> 元素的宽高减小为原始值的一半：

div {
    -ms-transform: scale(0.5, 0.5); /* IE 9 */
    -webkit-transform: scale(0.5, 0.5); /* Safari */
    transform: scale(0.5, 0.5);
}

scale() 方法

<!DOCTYPE html>
<html>
<head>
<style>
div {
    margin: 150px;
    width: 200px;
    height: 100px;
    background-color: yellow;
    border: 1px solid black;
    border: 1px solid black;
    -ms-transform: scale(0.5, 0.5); /* IE 9 */
    -webkit-transform: scale(0.5, 0.5); /* Safari */
    transform: scale(0.5, 0.5); /* Standard syntax */
}
</style>
</head>
<body>
    <p>The scale() method increases or decreases the size of an element.</p>
    <div>This div element is decreased to be half of its original width and height.</div>
</body>
</html>

skewX() 方法（The skewX() Method）

skewX() 方法使元素以给定的角度沿 X 轴倾斜。
下列示例使 <div> 元素沿 X 轴倾斜 20 度：

div {
    -ms-transform: skewX(20deg); /* IE 9 */
    -webkit-transform: skewX(20deg); /* Safari */
    transform: skewX(20deg);
}

skewX() 方法

<!DOCTYPE html>
<html>
<head>
<style>
div {
    width: 300px;
    height: 100px;
    background-color: yellow;
    border: 1px solid black;
}

div#myDiv {
    -ms-transform: skewX(20deg); /* IE 9 */
    -webkit-transform: skewX(20deg); /* Safari */
    transform: skewX(20deg); /* Standard syntax */
}
</style>
</head>
<body style="margin: 30px;">
    <p>The skewX() method skews an element along the X-axis by the given angle.</p>
    <div>This a normal div element.</div>
    <div id="myDiv">This div element is skewed 20 degrees along the X-axis.</div>
</body>
</html>

skewY() 方法（The skewY() Method）

skewY() 方法使元素以给定的角度沿 Y 轴倾斜。
下列示例使 <div> 元素沿 Y 轴倾斜 20 度：

div {
    -ms-transform: skewY(20deg); /* IE 9 */
    -webkit-transform: skewY(20deg); /* Safari */
    transform: skewY(20deg);
}

skewY() 方法

<!DOCTYPE html>
<html>
<head>
<style>
div {
    width: 300px;
    height: 100px;
    background-color: yellow;
    border: 1px solid black;
}

div#myDiv {
    -ms-transform: skewY(20deg); /* IE 9 */
    -webkit-transform: skewY(20deg); /* Safari */
    transform: skewY(20deg); /* Standard syntax */
}
</style>
</head>
<body>
    <p>The skewY() method skews an element along the Y-axis by the given angle.</p>
    <div>This a normal div element.</div>
    <div id="myDiv">This div element is skewed 20 degrees along the Y-axis.</div>
</body>
</html>

skew() 方法（The skew() Method）

skew() 方法使元素以给定的角度沿 X 轴 和 Y 轴同时倾斜。
下列示例使 <div> 元素沿 X 轴倾斜 20 度，沿 Y 轴倾斜 10 度：

div {
    -ms-transform: skew(20deg, 10deg); /* IE 9 */
    -webkit-transform: skew(20deg, 10deg); /* Safari */
    transform: skew(20deg, 10deg);
}

skew() 方法

<!DOCTYPE html>
<html>
<head>
<style>
div {
    width: 300px;
    height: 100px;
    background-color: yellow;
    border: 1px solid black;
}

div#myDiv {
    -ms-transform: skew(20deg, 10deg); /* IE 9 */
    -webkit-transform: skew(20deg, 10deg); /* Safari */
    transform: skew(20deg, 10deg); /* Standard syntax */
}
</style>
</head>
<body style="margin: 30px;">
    <p>The skew() method skews an element into a given angle.</p>
    <div>This a normal div element.</div>
    <div id="myDiv">This div element is skewed 20 degrees along the X-axis, and 10 degrees along the Y-axis.</div>
</body>
</html>

如果第二个参数没有指定，它的值为 0 。因此，下列示例使 <div> 元素沿 X 轴倾斜 20 度：

div {
    -ms-transform: skew(20deg); /* IE 9 */
    -webkit-transform: skew(20deg); /* Safari */
    transform: skew(20deg);
}

skew() 方法

<!DOCTYPE html>
<html>
<head>
<style>
div {
    width: 300px;
    height: 100px;
    background-color: yellow;
    border: 1px solid black;
}

div#myDiv {
    -ms-transform: skew(20deg); /* IE 9 */
    -webkit-transform: skew(20deg); /* Safari */
    transform: skew(20deg); /* Standard syntax */
}
</style>
</head>
<body style="margin: 30px;">
    <p>The skew() method skews an element into a given angle.</p>
    <div>This a normal div element.</div>
    <div id="myDiv">This div element is skewed 20 degrees along the X-axis.</div>
</body>
</html>

matrix() 方法（The matrix() Method）

matrix() 方法

matrix() 方法集成了 2D 变换的所有方法于一身。
matrix() 方法接收 6 个参数，包含数学功能，允许你对元素进行旋转、伸缩、移动以及倾斜。
参数如下所示：
matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY())

div {
    -ms-transform: matrix(1, -0.3, 0, 1, 0, 0); /* IE 9 */
    -webkit-transform: matrix(1, -0.3, 0, 1, 0, 0); /* Safari */
    transform: matrix(1, -0.3, 0, 1, 0, 0);
}

matrix() 方法

<!DOCTYPE html>
<html>
<head>
<style>
div {
    width: 300px;
    height: 100px;
    background-color: yellow;
    border: 1px solid black;
}

div#myDiv1 {
    -ms-transform: matrix(1, -0.3, 0, 1, 0, 0); /* IE 9 */
    -webkit-transform: matrix(1, -0.3, 0, 1, 0, 0); /* Safari */
    transform: matrix(1, -0.3, 0, 1, 0, 0); /* Standard syntax */
}

div#myDiv2 {
    -ms-transform: matrix(1, 0, 0.5, 1, 150, 0); /* IE 9 */
    -webkit-transform: matrix(1, 0, 0.5, 1, 150, 0); /* Safari */
    transform: matrix(1, 0, 0.5, 1, 150, 0); /* Standard syntax */
}
</style>
</head>
<body>
    <p>The matrix() method combines all the 2D transform methods into one.</p>
    <div>This a normal div element.</div>
    <div id="myDiv1">Using the matrix() method.</div>
    <div id="myDiv2">Another use of the matrix() method.</div>
</body>
</html>
[CSS3]2D与3D变换技术详解
kevin_blog
08-14 3258
2D和3D变换为Web设计和开发提供了丰富的视觉效果。掌握这些变换技术，不仅能增强网页的互动性，还能为用户带来更直观、生动的体验。在实际应用中，可以将这些变换与CSS动画结合，创造出更加复杂和有趣的效果。
css元素转换(旋转函数、rotateX 和 rotateY 的使用、移动函数、缩放函数、过渡、动画)详解
Argonaut_的博客
01-05 1万+
页面上有两个 div 元素块，使用 transform: translateX(20px) 让第一个元素块向 X 轴移动 20 个像素；使用 transform: translateY(30px) 让第二个元素块向 Y 轴移动 30 个像素。在上面代码中，用 steps 的方式将 div 元素分成四步，使元素的面积逐渐变成原来的 2 倍，当鼠标从元素上移开，又会以四步的形式将元素还原成原有的大小。接下来给大家介绍一下 transition-timing-function 属性的取值吧！
CSS样式（4）
weixin_57762542的博客
11-08 205
今天我们来学习CSS样式， 1.属性：transform: skew( 50deg ); 样式：正常→旋转 用法和值：旋转；deg是单位度；旋转度数 2.属性：transform: scale(0.5,0.5); 样式：正常→缩放 用法和值：缩放；括号里是缩放倍数，分别代表X/Y轴，只写一个的时候xy轴默认一样； 3.属性：transform: skew(0deg,25deg); 样式：正常→旋转 用法和值：扭曲；括号里代表扭曲角度，分别为X/Y轴的一个度数，deg是单位度。
css 中的旋转
上善若水
06-27 1690
1、rotate 旋转角度 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <style type="text/css"> div { width:20
rotate()旋转角度/顺逆时针问题
热门推荐
Viry_Hu的博客
08-18 2万+
理论上都应是让各轴的正向(X轴向右、Y轴向下、Z轴面向自己)指向自己，顺时针(正角度值)/逆时针(负角度值)转； 但rotate()、rotateZ()，会采用就近转到目标角度原则：  小于180°，正常顺时针，但大于180°就要注意：例设值200deg，会逆时针转160度完事；  设180°会逆时针转，-180°才顺时针；  设360°的倍数值压根转都不转。 而rotateX() 、 r...
Pytorch之Rot旋转
Ton的博客
04-07 6482
整理记录一下PyTorch中旋转函数rot90的使用方法。 参考目录： ①PyTorch官方用法 torch.rot901 使用背景2 函数简介3 实战效果3.1 顺时针旋转90°3.2 逆时针旋转90°3.3 逆时针旋转180°3.4 逆时针旋转前2个维度 1 使用背景 对于一个nnn维张量，如果想要对某2个维度进行旋转，可以调用torch.rot90()函数。 2 函数简介 调用格式： torch.rot90(Tensor, k, dim) Note： 第一个形参Tensor是你准备进行旋转的张量.
CSS3之2D与3D变换的实现方法
09-22
2D变换允许对元素进行平移、旋转、缩放和倾斜操作，而3D变换则在2D变换的基础上引入了Z轴的概念，使得可以对元素进行更为复杂的立体变换，为Web设计带来了革命性的变化。 1. CSS中的坐标系 在CSS3中，坐标系基于...
CSS3D矩阵变换_casinoShelby_gamecenter_3_下载.zip
04-13
每一行的四个元素定义了一个2D变换矩阵，组合起来就构成了3D变换。 1. 平移（Translation）：通过改变最后三个元素（m, n, o）实现，分别对应X轴、Y轴和Z轴的位移。 2. 缩放（Scaling）：通过改变前三个对角线元素...
CSS3中的transform属性进行2D和3D变换的基本用法
09-24
在2D变换中，transform提供了以下几种函数： 1. rotate(θ)：以元素的中心为轴心，按照角度θ进行旋转。θ的单位是度（deg）、弧度（rad）或梯度（grad）。 2. skew(θx, θy)：沿着水平方向（x轴）和垂直方向（y轴...
HTML5+CSS3
weixin_45257157的博客
12-29 690
HTML5 第二天 一、rotate 2d旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转 使用步骤： 给元素添加转换属性 transform 属性值为 rotate(角度) 如 transform:rotate(30deg) 顺时针方向旋转30度 div{ transform: rotate(0deg); } 二、三角 代码演示 二、设置元素旋转中心点(tran...
css旋转45度_CSS动画-2D、3D转换
weixin_39869693的博客
11-29 1435
CSS动画-2D、3D转换2D 转换1、translate() 方法通过 translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数：实例div{transform: translate(50px,100px);}值 translate(50px,100px) 把元素从左侧移动 50 像素，从顶端移动 100 像素。2、rotate() ...
css旋转45度_CSS 知识总结
weixin_39774808的博客
11-29 2996
一、CSS介绍CSS指层叠样式表，其作用是给HTML提供了一种样式描述，定义了其中元素的显示方式。CSS使用最广泛是2.1版本，CSS3之后是2.1各模块的升级版二、CSS语法选择器 { 属性名:属性值;属性名:属性值; /*注释*/ }注意事项所有符号都是英文符号，如果写错了，浏览器会警告区分大小写，a 和 A 是不同的东西没有 // 注释最后一个分号可以省略，但建议不要省略任何地方...
css3--变形transform--移动旋转缩放
cmy741741的博客
06-17 1058
作用：改变标签在二维平面上的位置。经常和transition（过渡）一起使用。transition语法transform: translate(100px,100px);transform: translate(50%,50%)transform: translateX(100px)transform: translateY(100px)1.translalt属性移动过程中不会影响其他元素。2.x,y的值用百分比是基于自生的宽高来对比的。3.行内元素不能使用translatetransform: rotat
CSS_变形之平移&旋转&缩放
weixin_45084986的博客
03-23 650
平移translate X和Y轴平移 transform: translateX(-50%) translateY(-50%); <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> body{ background-color: #dddddd } .
关于 transform:matrix(1,0,0,1,0,0)
景山编程-顺道编程
04-11 1万+
transform 相对比较难理解的是 2D 的集合 matrix 。 这里只是对 matrix 里面的元素进行分解 matrix( 1 , 0 , 0 , 1 , 0 , 0 ) 1 2 3 4 5 6 1. 正常值为1，定义的是 scaleX 通过设置 X 轴的值来定义缩放。值：>=0 2. 正常值为0，定义的是 skew 定义 2D
matrix()参数解析
u012798558的博客
01-02 3125
div { transform:matrix(0.866,0.5,-0.5,0.866,0,0); -ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */ -moz-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Firefox */ -webkit-transform:matrix(0.
CSS+DIV实现鼠标经过背景变色 [onmouseover; onmouseout]
HDdgut的博客
03-10 693
css: .ani li{ position:relative; width:100px; height:100px; overflow: hidden; float: left; display: flex; justify-content: center; ...
CSS知识总结
最新发布
2403_89524622的博客
05-05 1293
精通盒模型与定位体系掌握Flex/Grid现代布局深入理解渲染原理持续跟进CSS新特性延伸学习CSS自定义属性（变量）容器查询（Container Queries）层叠层（@layer）通过系统学习和持续实践，结合开发者工具的调试分析，逐步建立完整的CSS知识体系。建议每周完成一个综合布局练习，并参与CodePen等平台的代码挑战。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值