CSS 2D转换——transform属性

最新推荐文章于 2024-03-19 20:30:55 发布

在到处之间找我

最新推荐文章于 2024-03-19 20:30:55 发布

阅读量1.5k

点赞数 2

分类专栏： # CSS学习笔记文章标签： CSS 2D转换 transform属性

本文链接：https://blog.csdn.net/sinat_41104353/article/details/79463191

版权

CSS学习笔记专栏收录该内容

12 篇文章 1 订阅

订阅专栏

2D转换

通过CSS3转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸。

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

属性	Chrome	IE	Firefox	Safari	Opera
transform	36.0 4.0 -webkit-	10.0 9.0 -ms-	16.0 3.5 -moz-	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-	3.2 -webkit-	23.0 15.0 -webkit- 12.1 10.5 -o-

转换属性

属性	描述	CSS
transform	向元素应用 2D 或 3D 转换。	3
transform-origin	允许你改变被转换元素的位置。	3

2D Transform方法

函数	描述
matrix(n,n,n,n,n,n)	定义 2D 转换，使用六个值的矩阵。
translate(x,y)	定义 2D 转换，沿着 X 和 Y 轴移动元素。
translateX(n)	定义 2D 转换，沿着 X 轴移动元素。
translateY(n)	定义 2D 转换，沿着 Y 轴移动元素。
scale(x,y)	定义 2D 缩放转换，改变元素的宽度和高度。
scaleX(n)	定义 2D 缩放转换，改变元素的宽度。
scaleY(n)	定义 2D 缩放转换，改变元素的高度。
rotate(angle)	定义 2D 旋转，在参数中规定角度。
skew(x-angle,y-angle)	定义 2D 倾斜转换，沿着 X 和 Y 轴。
skewX(angle)	定义 2D 倾斜转换，沿着 X 轴。
skewY(angle)	定义 2D 倾斜转换，沿着 Y 轴。

常见方法

rotate()方法

通过rotate()方法，元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。

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

transform:rotate(30deg);
-ms-transform:rotate(30deg); /* IE 9 */
-moz-transform:rotate(30deg); /* Firefox */
-webkit-transform:rotate(30deg); /* Safari and Chrome */
-o-transform:rotate(30deg); /* Opera */
}
div#div2
{
transform:rotate(30deg);
-ms-transform:rotate(30deg); /* IE 9 */
-moz-transform:rotate(30deg); /* Firefox */
-webkit-transform:rotate(30deg); /* Safari and Chrome */
-o-transform:rotate(30deg); /* Opera */
}
</style>
</head>
<body>

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

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

</body>
</html>

rotate()括号里写角度，单位是deg。如rotate（45deg），表示顺时针旋转45度。

rotate(-30deg)表示逆时针旋转30度

属性transform-origin可以设置旋转的中心点，默认是图形的中心。可以设置为transform-origin: top right;表示旋转中心为左上角。设置transform-origin: 20px 40px;表示围绕距离左侧20像素上方40像素的点旋转。

translate()方法

通过translate()方法，元素从其当前位置移动，根据给定的left（x坐标）和top（y坐标）位置参数：

<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>

值translate(50px, 100px)把元素从左侧移动50像素，从顶端移动100像素。

scale()方法

通过scale（）方法，元素的尺寸会增加或减少，根据给定的宽度（x轴）和高度（y轴）参数。

<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>

值scale(2, 4)把宽度转换为原始尺寸的2倍，把高度转换为原始高度的4倍。

值scale(2)把长宽都放大2倍

值scalex(5)只把长变为5倍

skew()方法

通过skew()方法，元素翻转给定的角度，根据给定的水平线（x轴）和垂直线（y轴）参数

<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>

值skew(30deg, 20deg)围绕x轴把元素翻转30度，围绕y轴翻转20度。

matrix()方法

matrix()方法把所有的2D转换方法组合在一起。

matrix() 方法需要六个参数，包含数学函数，允许我们：旋转、缩放、移动以及倾斜元素。

使用matrix()方法把div元素旋转30度

<head>
<style> 
div
{
width:100px;
height:75px;
background-color:yellow;
border:1px solid black;
}
div#div2
{
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.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */
-o-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Opera */
}
</style>
</head>

在到处之间找我

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
CSS 2D转换——transform属性

2D转换通过CSS3转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸。浏览器支持表格中的数字表示支持该属性的第一个浏览器版本号。紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。属性ChromeIEFirefoxSafariOperatransform36.04.0 -webkit-10.09.0 -ms-16.03.5 -moz-3.2 -w...
复制链接

扫一扫

专栏目录