变形（Transform）

最新推荐文章于 2024-05-16 09:13:08 发布

Dewey666

最新推荐文章于 2024-05-16 09:13:08 发布

阅读量391

点赞数

分类专栏：效果初现文章标签：变形Transform

本文链接：https://blog.csdn.net/IT666DHW/article/details/78127924

版权

效果初现专栏收录该内容

108 篇文章 3 订阅

订阅专栏

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>变形（Transform）</title>
<style>
div{
width:200px;
height:200px;
margin-top:66px;
line-height:200px;
background-color:#F90;
}
.d1{
transform-origin:100% 100% ; /* 设置变换基点，左上角为0 0.右下角为100% 100% */
transform:rotate(21deg); /*旋转，整数位顺时针旋转，负数为逆时针旋转*/

}

.d2{
/*缩放，scale(X,Y),X代表水平缩放，Y代表垂直缩放。如果大于1，是增大，小于1，是变小*/
transform:scaleX(2);
}

.d3{
transform:skew(20deg,20deg); /*扭曲*/
margin-bottom:100px;
}

.d4{
transform: rotate(45deg);
transform-origin:20% 40%;
-moz-transform: rotate(45deg);
-moz-transform-origin:20% 40%; /*2D与3D切换，明显当前div亮度与其他的不一样 */
}

</style>
</head>

<body>
<center>
<div>原图片</div>
<div class="d1">变形 1</div>
<div class="d2">变形 2</div>
<div class="d3">变形 3</div>
<div class="d4">变形 4</div>
</center>
</body>
</html>