css 2D 转换

最新推荐文章于 2023-07-12 13:11:15 发布

执着更专业

最新推荐文章于 2023-07-12 13:11:15 发布

阅读量449

点赞数

分类专栏： css 文章标签： css 2d

本文链接：https://blog.csdn.net/pangchengyong0724/article/details/52063900

版权

css 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

html

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="UTF-8">
<title>动画</title>
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>

<div>
这个是一个刚刚开始效果
</div>
<hr >
<div class="div2">
这个是改变后的div
</div>

</body>

</html>

css

div{
width: 100px;
height: 100px;
background-color: blue;
}

/*translate 浮动*/
/* .div2{
translate(X,Y)
transform: translate(200px,100px);
-webkit 支持chrome safari
-webkit-transform:translate(200px,100px);
-ms 支持ie
-ms-transform:translate(200px,100px);
-o 支持opera
-o-transform:translate(200px,100px);
-moz 支持 Firefox
-moz-transform:translate(200px,100px);
} */

/* .div2{
rotate 旋转
transform: rotate(200deg);
-webkit-transform:rotate(200deg);
} */

/*scale(宽度,高度)*/
/* .div2{
transform: scale(1,1);
-webkit-transform:scale(1,1);
} */

/*skew(X,Y) 旋转*/
/* .div2{
transform: skew(50deg,50deg);
-webkit-transform:skew(50deg,50deg);
} */

/*matrix 矩阵*/
/* .div2{
transform: matrix(1, 0, 0, 1, 30, 30);;
-webkit-transform: matrix(1, 0, 0, 1, 30, 30);
} */