CSS-26.2D转换-transform属性

最新推荐文章于 2022-05-06 19:59:06 发布

别忘了缩进

最新推荐文章于 2022-05-06 19:59:06 发布

阅读量227

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/qq_34737697/article/details/79185685

版权

29 篇文章 0 订阅

订阅专栏

  2D转换时指旋转，平移，缩放及其组合 

  代码： 

  <!DOCTYPE html> 

  <html lang="en"> 

  <head> 

  <meta charset="UTF-8"> 

  <title>Title</title> 

  <style> 

*{

  margin: 0; 

  padding: 0; 

}

ul{

  margin: 0 auto; 

  height: 500px; 

  width: 500px; 

  border: 1px solid #000; 

}

li{

  width: 100px; 

  height: 40px; 

  background-color: #5e5e5e; 

  list-style: none; 

  text-align: center; 

  line-height: 40px; 

  margin: 0 auto; 

  margin-bottom:70px; 

}

  li:nth-child(2){ 

 
 transform: rotate(45deg); 

}

  li:nth-child(3){ 

 
 transform: translate(100px,30px); 

}

  li:nth-child(4){ 

 
 transform: scale(1.5,1.5); 

}

  li:nth-child(5){ 

 
 transform:rotate(45deg) translate(100px,30px) scale(1.5,1.5); 

}

  </style> 

  </head> 

  <body> 

  <ul> 

  <li>正常</li> 

  <li>旋转</li> 

  <li>平移</li> 

  <li>缩放</li> 

  <li>综合使用</li> 

  </ul> 

  </body> 

  </html> 

 
 transform: rotate(45deg);是指将顺时针旋转45度 

 
 transform: translate(100px,30px);在块元素上存在一个坐标系，水平平移100px，垂直向下平移30px 

 
 transform: scale(1.5,1.5);缩放，有两个值，当两个值相同时，写一个即可，水平缩放和垂直缩放。 

  注意点：当元素旋转了，再平移的时候，坐标系也会进行平移。当我们既要平移也要旋转时，要考虑位置，可以将translate写在rotate的前面。 

关注

专栏目录