<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="xz">
旋转
</div>
<div class="py">
平移
</div>
<div class="sf">
缩放
</div>
<div class="nq">
扭曲
</div>
</body>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="xz">
旋转
</div>
<div class="py">
平移
</div>
<div class="sf">
缩放
</div>
<div class="nq">
扭曲
</div>
</body>
</html>
//css的样式
div{
width: 200px;
height: 150px;
background: pink;
margin-top: 150px;
margin-left: 200px;
}
.xz{
transform: rotate(45deg);
}
.py{
transform: translate(100px,100px);
}
.sf{
transform: scale(2,2);
}
.nq{
transform: skew(30deg,10deg);
}
//基点
/*默认值*/ 20 transform-origin:50% 50%; 21 /*左上角*/ 22 /*transform-origin:top left;*/ 23 /*右上角*/ 24 /*transform-origin:right top;*/ 25 /*右下角*/ 26 /*transform-origin:right bottom;*/ 27 /*左下角*/ 28 /*transform-origin:bottom left;*/ 29 transform:rotate(45deg);
369
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
