Module de conversion 2D en HTML et CSS-tutoriel HTML-php.cn

Module de conversion 2D en HTML et CSS

php中世界最好的语言

Libérer： 2018-03-13 11:36:14

original

1832 Les gens l'ont consulté

Cette fois je vous présente le module de conversion 2D en HTML et CSS. Quelles sont les précautions pour le module de conversion 2D en HTML et CSS Voici un cas pratique, jetons un oeil.

1. Module de conversion 2D

Module de conversion 2D

/*où deg est l'unité, représentant le nombre de degrés*/
transform: rotate(45deg); /*
Premier paramètre : Direction horizontale
Deuxième paramètre : Direction verticale
*/transform: translation(100px, 0px);/*
Premier paramètre : Direction horizontale
Non. Direction verticale
Notes :
Si la valeur est 1, cela signifie aucun changement
Si la valeur est supérieure à 1, cela signifie qu'elle doit être agrandie
Si la valeur est inférieure à 1, cela signifie qu'il doit être réduit
Si les mises à l'échelle horizontale et verticale sont les mêmes, alors il peut être abrégé en paramètre
*//*transform: scale(0.5, 0.5);*/transform: scale(1.5 );/*
Remarque :
1. Si plusieurs transformations sont nécessaires, séparez-les par des espaces
2 Le module de conversion 2D modifiera le système de coordonnées de l'élément, donc la translation après rotation n'est pas une translation horizontale.
*/transform : rotate(45deg) translation(100px, 0px);

Module de conversion 2D

Module de conversion 2D en HTML et CSS

2. Module de conversion 2D - Point central de déformation

Par défaut, tous les éléments tournent en utilisant leur propre point central comme référence Nous pouvons modifier son point de référence via l'attribut de point central de déformation

<.>

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

Copier après la connexion

Module de conversion 2D en HTML et CSS

3. Attribut de perspective (perspective : 500px ;) et axe de rotation (transformation : rotateY(45deg);)

1.perspective : 500px;

1.1 Qu'est-ce que la perspective

Près grande et lointaine petite

1.2 Points d'attention

Assurez-vous de noter que. l'attribut perspective doit être ajouté à ce qui doit être rendu Au-dessus de l'élément parent de l'élément avec des effets proches de grands et lointains

2.transform : rotateY(45deg);

Quel axe faire vous souhaitez faire pivoter, il vous suffit alors d'ajouter quel axe après la rotation ;

Exemple de code :

<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>

Copier après la connexion

Module de conversion 2D en HTML et CSS

4. Pratique du poker

<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>

Copier après la connexion

Module de conversion 2D en HTML et CSS

5. Mur de photos

<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>

Copier après la connexion

Je crois que vous maîtrisez le poker. méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention à d'autres sujets connexes sur l'article du site Web chinois php !

Lecture recommandée :

La mise en page des pages Web et les flottants de compensation

La mise en page des pages Web et les flottants

Modèle de boîte HTML et CSS

Arrière-plan et sprite CSS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!