HTML与CSS中2D如何转换模块

本篇文章为大家展示了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转换模块

二. 2D转换模块-形变中心点

默认情况下所有的元素都是以自己的中心点作为参考来旋转的, 我们可以通过形变中心点属性来修改它的参考点

/*
第一个参数:水平方向
第二个参数:垂直方向
注意点
取值有三种形式
具体像素
百分比
特殊关键字
*/
/*transform-origin: 200px 0px;*/
/*transform-origin: 50% 50%;*/
/*transform-origin: 0% 0%;*/
/*transform-origin: center center;*/
transform-origin: left top;

三.透视属性(perspective: 500px;) 和 旋转轴向 (transform: rotateY(45deg);)

1.perspective: 500px;

1.1什么是透视

近大远小

1.2.注意点

一定要注意, 透视属性必须添加到需要呈现近大远小效果的元素的父元素上面

2.transform: rotateY(45deg);

想围绕哪个轴旋转, 那么只需要在rotate后面加上哪个轴即可;

代码示例:

      
     
     
   
     
![](images/rotateZ.jpg)
     
![](images/rotateX.jpg)
     
![](images/rotateY.jpg)
 
  

四. 扑克牌练习

 
     
     

        
     ![](images/pk.png) 
 
     

五. 照片墙

 
      
           
                 
     
     
              
 
                
![](images/1.jpg)
     
                
![](images/2.jpg)
     
                
![](images/3.jpg)
     
                
![](images/4.jpg)
 
              
      

上述内容就是HTML与CSS中2D如何转换模块，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注创新互联行业资讯频道。