变换元素transform的那些事儿

来源：互联网发布：访问网站出现 php探针编辑：程序博客网时间：2024/06/05 00:31
老习惯，直接上代码
<!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>
阅读全文
0 0