css 2D转换

飞马攻城师

已于 2023-01-31 20:40:18 修改

阅读量1.3k

点赞数

分类专栏： css 文章标签： css 前端 css3

于 2023-01-23 10:48:15 首次发布

本文链接：https://blog.csdn.net/change_any_time/article/details/128750977

版权

css 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

文章目录

一、什么是2D转换
二、rotate() 方法（旋转）
三、translate() 方法（位移）
四、scale() 方法（缩放）
五、skew() 方法（倾斜）

一、什么是2D转换

在二维空间下对元素进行移动、缩放、转动、拉长或拉伸。

在这里插入图片描述

二、rotate() 方法（旋转）

在一个给定度数，正值是顺时针旋转元素，负值是逆时针旋转元素。

语法：


rotate(a)

选项参数：

	a：是一种<angle>，表示旋转的角度。正角度表示了顺时针的旋转，负角度表示逆时针的旋转。

例：

<!DOCTYPE html>
<html>	
<head>
<meta charset="utf-8"> 
<title>rotate 方法演示</title> 
<style> 
div
{
	width:200px;
	height:100px;
	text-align:center;
	line-height:100px;
	background-color:red;
	color:white;
	border:1px solid gray;
	margin-top:10px;
}

div.rotate	
{
	transform:rotate(180deg); //顺时针旋转180度
}
</style>
</head>
<body>

<div>hellow world!</div>

<div class="rotate">hellow world!</div>

</body>
</html>

运行结果：

在这里插入图片描述

三、translate() 方法（位移）

根据X轴（正值向右、负值向左）和Y轴（正值向下、负值向上）位置给定的参数，从元素当前位置移动。

语法：


translate(a,b)

选项参数：

	a：在x轴方向上平移的距离
	
	b：在y轴方向上平移的距离

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>translate 方法示例</title>
</head>
<body>
<div class="container">
    <div class="text">hello world</div>
</div>
</body>
<style>
    .container {
        margin-top: 100px;
        margin-left: 100px;
        width: 400px;
        height: 400px;
        border: 1px solid gray;
    }

    .container .text {
        width: 100px;
        height: 100px;
        line-height: 100px;
        text-align: center;
        color: white;
        background: red;
        transform: translate(50px, 100px);
    }
</style>
<script>
</script>
</html>

运行结果：
![在这里插入图片描述](https://img-blog.csdnimg.cn/ff5a1571379047eca4ff0abf312f8836.png

四、scale() 方法（缩放）

用于修改元素的大小，可以通过向量形式定义的缩放值来放大或缩小元素，同时可以在不同的方向设置不同的缩放值。
在这里插入图片描述
语法：


scale(sx, sy)

选项参数：

	sx：<number>，表示缩放向量的横坐标。
	
	sy：<number> ，表示缩放向量的纵坐标。如果未设置，则他的默认值被设置为 sx。从而使得元素在保持原有形状下均等缩放

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>scale 方法示例</title>
</head>
<body>
<div class="container">
    <div>hello world</div>
    <div class="text">hello world</div>
</div>
</body>
<style>
    .container {
        margin-top: 100px;
        margin-left: 100px;
        width: 400px;
        height: 400px;
        border: 1px solid gray;
        position: relative;
    }

    .container div {
        width: 100px;
        height: 100px;
        line-height: 100px;
        text-align: center;
        color: white;
        background: red;
        display: inline-block;
    }

    .container .text {
        transform: scale(2,2);
        left: 200px;
        top: 50px;
        position: absolute;
    }

</style>
<script>
</script>
</html>

运行结果：
在这里插入图片描述

五、skew() 方法（倾斜）

这种转换是一种剪切映射 (横切)，它在水平和垂直方向上将单元内的每个点扭曲一定的角度。每个点的坐标根据指定的角度以及到原点的距离，进行成比例的值调整；因此，一个点离原点越远，其增加的值就越大。

语法：


skew(a,b)

选项参数：

	a：是一个 <angle>，表示用于沿横坐标扭曲元素的角度。
	
	b：是一个 <angle> ，表示用于沿纵坐标扭曲元素的角度。如果未定义，则其默认值为 0，导致纯水平倾斜。

例：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>translate 方法示例</title>
</head>
<body>
<div class="container">
    <div class="text">hello world</div>
</div>
</body>
<style>
    .container {
        margin-top: 100px;
        margin-left: 100px;
        width: 400px;
        height: 400px;
        border: 1px solid gray;
    }

    .container .text {
        width: 100px;
        height: 100px;
        line-height: 100px;
        text-align: center;
        color: white;
        background: red;
        transform: skew(30deg,20deg);
    }
</style>
<script>
</script>
</html>