变形（Transform）

来源：互联网发布：sqlserver 循环编辑：程序博客网时间：2024/06/04 19:00

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

阅读全文

0 0