老习惯，直接上代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width: 200px;
height: 200px;
border:1px solid red;
margin:50px;
float: left;
text-align: center;
line-height: 200px;
font-size: 24px;
}
/*translateX就是在原来的基础上,想右移动30像素,如果是负数就是向左移动30像素*/
.div1{
transform: translateX(30px);
}
/*translateY就是在原来的基础上,想下移动30像素,如果是负数就是向上移动30像素*/
.div2{
transform: translateY(30px);
}
/*直接使用translate,里面传入两个值,什么含义就不言而喻了,第一个是关于x轴的移动，第二个是关于y轴的移动*/
.div3{
transform: translate(20px,20px);
}
/*总结，其实以上从表面上看就是和将该元素设置为相对定位,然后设置left,top值一样*/
/*我们为什么还要使用这个呢?当然第一是更加方便,第二是为了使用transition实现过渡效果*/
/*将宽度扩大为原来的1.5倍,同理如果是scaleY也就是高度放大,下面只是介绍X方向的操作,Y轴同理*/
.div4{
transform: scaleX(1.5);
}
/*如果我们的值不是大于1,是在0-1之间的话,那么就是缩小*/
.div5{
transform: scaleX(0.5);
}
/*如果值是小于0的话，那么就是进行旋转180度，并且长度或者宽度变为其绝对值*/
.div6{
transform: scaleX(-1);
}
/*围绕中心旋转,如果是正值则是顺时针,如果是负值,则是逆时针*/
.div7{
transform: rotate(30deg);
}
/*和上面的一样,第一个代表X方向,第二个代表Y方向。此处为元素倾斜，第一个参数是水平元素倾斜，也就可以理解为，如果值为正值，可以理解为我们拖动左上角的那个点，将一个长方形变成一个平行四边形,为负值，就是拖动右上角的点*/
.div8{
transform: skew(10deg,0deg);
}
.div9{
/*设置变换的起点,默认情况是50%，50%。刚好是正中心*/
transform-origin: 10% 10%;
transform: rotate(-45deg);
}
</style>
</head>
<body>
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
<div class="div4">4</div>
<div class="div5">5</div>
<div class="div6">6</div>
<div class="div7">7</div>
<div class="div8">8</div>
<div class="div9">9</div>
<div class="div10">10</div>
</body>
</html>
3667
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
