HTML与CSS中2D转换模块-百分百源码网

HTML与CSS中2D转换模块

发布时间：09/01 来源：未知浏览：关键词：

这次给大家带来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后面加上哪个轴即可;

代码示例:

<html lang="en"> <head>     
<meta charset="UTF-8">     
<title>95-2D转换模块-扭转轴向</title>     
<style>         
*{             margin: 0;             padding: 0;         }         
ul{             width: 800px;             height: 500px;             margin: 0 auto;         }         
ul li{             list-style: none;             width: 200px;             height: 200px;             margin: 0 auto;             margin-top: 50px;             border: 1px solid #000;             
/*             1.什么是透视             近大远小            
2.留意点             必然要留意, 透视属性必需增加到需要显现近大远小结果的元素的父元素上面             */
             perspective: 500px;         }         ul li img{             width: 200px;             height: 200px;             
             /*perspective: 500px;*/
                      }         ul li:nth-child(1){             
                      /*默许状况下所有元素都是环绕Z轴停止扭转*/
                                   transform: rotateZ(45deg);         }         ul li:nth-child(2) img{             transform: rotateX(45deg);         }         ul li:nth-child(3) img{             /*             总结:             想环绕哪个轴扭转, 那么只需要在rotate后面加上哪个轴即可             */             transform: rotateY(45deg);         }     </style> </head> <body> <ul>     <li>![](images/rotateZ.jpg)</li>     <li>![](images/rotateX.jpg)</li>     <li>![](images/rotateY.jpg)</li> </ul> </body> </html>

四. 扑克牌练习

<html lang="en"> 
<head>     
<meta charset="UTF-8">     
<title>96-2D转换模块-练习</title>
     <style>         
     *{             margin: 0;             padding: 0;         }         
     p{             width: 310px;             height: 438px;             border: 1px solid #000;             
     background-color: skyblue;             margin: 100px auto;             perspective: 500px;         }              
              p img{             transform-origin: center bottom;             transition: transform 1s;         }
                       p:hover img{             transform: rotateX(80deg);         }     
                       </style> </head> <body> <p>     ![](images/pk.png) </p> 
    </body> 
</html>

五. 相片墙

<html lang="en">
 <head>
      <meta charset="UTF-8">
           <title>97-2D转换模块-相片墙</title>
                <style>
                         *{             margin: 0;             padding: 0;         }
                                  ul{             height: 400px;             border: 1px solid #000;
                                    background-color: skyblue;             margin-top: 100px;
                                     text-align: center;         }
                               ul li{             list-style: none; 
                                           width: 150px;             height: 200px;             
                                           background-color: red;             display: inline-block;
                                            //转换成行内块级元素,用于水平排版            
                                    margin-top: 100px;             transition: all 1s;            
                                     position: relative;             box-shadow: 0 0 10px;         }        
                                   ul li:nth-child(1){             transform: rotate(30deg);         } 
                                   ul li:nth-child(2){             transform: rotate(-40deg);         } 
                                   ul li:nth-child(3){             transform: rotate(10deg);         }
                                   ul li:nth-child(4){             transform: rotate(45deg);         }         
                                   ul li img{             width: 150px;             height: 200px; 
                                               border: 5px solid #fff;             box-sizing: border-box;
                                                        }         
                                   ul li:hover{             /*transform: rotate(0deg);*/  
                                              /*transform: none;*/             transform: scale(1.5);
                                               //此前的扭转被层叠掉, 只施行放大             
                                               z-index: 998;  
                                               //显示在最上面
                                               }   
             </style> 
    </head> 
    <body> 
              <ul> 
                <li>![](images/1.jpg)</li>     
                <li>![](images/2.jpg)</li>     
                <li>![](images/3.jpg)</li>     
                <li>![](images/4.jpg)</li> 
              </ul>
     </body> 
</html>

信赖看了本案牍例你已经把握了办法，更多出色请关注百分百源码网其它相关文章！

引荐阅读：

网页的规划方式之清除浮动

网页的规划方式与浮动

HTML与CSS的盒子模型

CSS的背景与精灵图

以上就是HTML与CSS中2D转换模块的具体内容，更多请关注百分百源码网其它相关文章！

打赏