HTML与CSS中2D转换模块

  一.2D转换模块
 
  2D转换模块
 
  /*其中deg是单位,代表多少度*/
 
  transform:rotate(45deg);/*
 
  第一个参数:水平方向
 
  第二个参数:垂直方向
 
  */transform:translate(100px,0px);/*
 
  第一个参数:水平方向
 
  第二个参数:垂直方向
 
  注意点:
 
  如果取值是1,代表不变
 
  如果取值大于1,代表需要放大
 
  如果取值小于1,代表需要缩小
 
  如果水平和垂直缩放都一样,那么可以简写为一个参数
 
  *//*transform:scale(0.5,0.5);*/transform:scale(1.5);/*
 
  注意点:
 
  1.如果需要进行多个转换,那么用空格隔开
 
  2.2D的转换模块会修改元素的坐标系,所以旋转之后再平移就不是水平平移的
 
  */transform:rotate(45deg)translate(100px,0px);
 
  2D转换模块
 
  1.webp
 
  二.2D转换模块-形变中心点
 
  默认情况下所有的元素都是以自己的中心点作为参考来旋转的,我们可以通过形变中心点属性来修改它的参考点
 
  /*
 
  第一个参数:水平方向
 
  第二个参数:垂直方向
 
  注意点
 
  取值有三种形式
 
  具体像素
 
  百分比
 
  特殊关键字
 
  */
 
  /*transform-origin:200px0px;*/
 
  /*transform-origin:50%50%;*/
 
  /*transform-origin:0%0%;*/
 
  /*transform-origin:centercenter;*/
 
  transform-origin:lefttop;
 
  2.webp
 
  三.透视属性(perspective:500px;)和旋转轴向(transform:rotateY(45deg);)
 
  1.perspective:500px;
 
  1.1什么是透视
 
  近大远小
 
  1.2.注意点
 
  一定要注意,透视属性必须添加到需要呈现近大远小效果的元素的父元素上面
 
  2.transform:rotateY(45deg);
 
  想围绕哪个轴旋转,那么只需要在rotate后面加上哪个轴即可;
 
  代码示例:
 
  <htmllang="en"><head>
 
  <metacharset="UTF-8">
 
  <title>95-2D转换模块-旋转轴向</title>
 
  <style>
 
  *{margin:0;padding:0;}
 
  ul{width:800px;height:500px;margin:0auto;}
 
  ulli{list-style:none;width:200px;height:200px;margin:0auto;margin-top:50px;border:1pxsolid#000;
 
  /*1.什么是透视近大远小
 
  2.注意点一定要注意,透视属性必须添加到需要呈现近大远小效果的元素的父元素上面*/
 
  perspective:500px;}ulliimg{width:200px;height:200px;
 
  /*perspective:500px;*/
 
  }ulli:nth-child(1){
 
  /*默认情况下所有元素都是围绕Z轴进行旋转*/
 
  transform:rotateZ(45deg);}ulli:nth-child(2)img{transform:rotateX(45deg);}ulli:nth-child(3)img{/*总结:想围绕哪个轴旋转,那么只需要在rotate后面加上哪个轴即可*/transform:rotateY(45deg);}</style></head><body><ul><li>![](images/rotateZ.webp)</li><li>![](images/rotateX.webp)</li><li>![](images/rotateY.webp)</li></ul></body></html>
 
  3.webp
 
  四.扑克牌练习
 
  <htmllang="en">
 
  <head>
 
  <metacharset="UTF-8">
 
  <title>96-2D转换模块-练习</title>
 
  <style>
 
  *{margin:0;padding:0;}
 
  p{width:310px;height:438px;border:1pxsolid#000;
 
  background-color:skyblue;margin:100pxauto;perspective:500px;}
 
  pimg{transform-origin:centerbottom;transition:transform1s;}
 
  p:hoverimg{transform:rotateX(80deg);}
 
  </style></head><body><p>![](images/pk.webp)</p>
 
  </body>
 
  </html>
 
  4.webp
 
  五.照片墙
 
  
 
  
 
  <htmllang="en">
 
  <head>
 
  <metacharset="UTF-8">
 
  <title>97-2D转换模块-相片墙</title>
 
  <style>
 
  *{margin:0;padding:0;}
 
  ul{height:400px;border:1pxsolid#000;
 
  background-color:skyblue;margin-top:100px;
 
  text-align:center;}
 
  ulli{list-style:none;
 
  width:150px;height:200px;
 
  background-color:red;display:inline-block;
 
  //转换成行内块级元素,用于水平排版
 
  margin-top:100px;transition:all1s;
 
  position:relative;box-shadow:0010px;}
 
  ulli:nth-child(1){transform:rotate(30deg);}
 
  ulli:nth-child(2){transform:rotate(-40deg);}
 
  ulli:nth-child(3){transform:rotate(10deg);}
 
  ulli:nth-child(4){transform:rotate(45deg);}
 
  ulliimg{width:150px;height:200px;
 
  border:5pxsolid#fff;box-sizing:border-box;
 
  }
 
  ulli:hover{/*transform:rotate(0deg);*/
 
  /*transform:none;*/transform:scale(1.5);
 
  //之前的旋转被层叠掉,只执行放大
 
  z-index:998;
 
  //显示在最上面
 
  }
 
  </style>
 
  </head>
 
  <body>
 
  <ul>
 
  <li>![](images/1.webp)</li>
 
  <li>![](images/2.webp)</li>
 
  <li>![](images/3.webp)</li>
 
  <li>![](images/4.webp)</li>
 
  </ul>
 
  </body>
 
  </html>





本文转载自中文网

 

推荐阅读