Maison > Article > interface Web > Utilisez CSS pour créer des triangles Utilisez CSS3 pour créer le principe et le code du tétraèdre 3D (pratique HTML5)_Compétences du didacticiel HTML5
Utilisez CSS pour créer des triangles Utilisez CSS3 pour créer le principe et le code du tétraèdre 3D (pratique HTML5)_Compétences du didacticiel HTML5
- WBOYoriginal
- 2016-05-16 15:50:281416parcourir
Aujourd'hui, j'ai lu un article sur la façon d'utiliser CSS3 pour créer un tétraèdre 3D. Je l'ai trouvé plutôt bien, alors je l'ai partagé avec vous.
La première chose que je veux partager avec vous est de savoir comment utiliser div CSS pour créer un triangle. Ici, je vais d'abord coller le code correspondant, puis vous expliquer le principe.
html :
Copiez le code
Le code est le suivant :Copier le code
Le code est le suivant : #pyramide {
position : relative contenu : "Triangle" ;
couleur :
gauche :
alignement du texte :
}
#pyramide > ; ; div:premier enfant {
border-color: #ff0000 transparent #ff0000 rgba(50, 50, 50, 0.6)
>
Effet de l'opération
:
Analyse des principes
:
Dans le code html, nous définissons deux divs Le div externe est l'objet conteneur, et le div interne est utilisé pour générer des triangles. Dans le code CSS, nous n'avons pas défini la largeur et la hauteur du div interne, mais uniquement la largeur des trois côtés de la bordure (haut, bas et gauche). En donnant aux trois côtés des couleurs différentes, ils deviendront trois triangles différents.
À ce stade, il suffit simplement de définir la couleur des côtés supérieur et inférieur sur des couleurs transparentes, et un triangle équilatéral apparaîtra.
Copier le code
Le code est le suivant :couleur :
gauche :
alignement du texte :
}
#pyramide > ; ; div:premier enfant {
border-color: #ff0000 transparent #ff0000 rgba(50, 50, 50, 0.6)
>
Effet de l'opération
:
Analyse des principes
:
Dans le code html, nous définissons deux divs Le div externe est l'objet conteneur, et le div interne est utilisé pour générer des triangles. Dans le code CSS, nous n'avons pas défini la largeur et la hauteur du div interne, mais uniquement la largeur des trois côtés de la bordure (haut, bas et gauche). En donnant aux trois côtés des couleurs différentes, ils deviendront trois triangles différents.
À ce stade, il suffit simplement de définir la couleur des côtés supérieur et inférieur sur des couleurs transparentes, et un triangle équilatéral apparaîtra.
Copier le code
#pyramid > premier enfant {
border-color: transparent transparent transparent rgba(50, 50, 50, 0.6);
} Rendu :
Parmi eux, rouge L'endroit indiqué dans le cercle est l'emplacement du div interne. C'est un objet invisible de 0 largeur et 0 hauteur, mais il existe réellement.
Ce dont nous allons parler ensuite, c'est comment implémenter un tétraèdre 3D et comment créer des animations.
Tout d’abord, collez le code correspondant.
Copier le code html :
Le code est le suivant :
< div>< ;/div> 🎜>
Le code est le suivant :
變換：rotateY（90deg）rotateZ（60deg）rotateZ（60deg）（transp -400px）；
}
#pyramid > div:nth-child(3) {
border-color: 透明透明透明rgba(50, 50, 50, 0.9);
-webkit- transform：rotateX（60deg）rotateY（19.5deg）；
-moz-變換：rotateX（60deg）rotateY（19.5deg）；
-ms-變換：rotateX（60deg）rotateY（19.5deg）； >變換：rotateX（60deg）rotateY（19.5deg）；
} #pyramid > div:nth-child(4) { border-color: 透明透明透明rgba(50, 50, 50, 0.8); -webkit-transform：rotateX（-60deg）rotateY（19.5deg）translateX（-116px）translateY（-200px）translateZ（326px）； （19.5deg）translateX（-116px）translateY（-200px）translateZ（326px）；-ms-transform：rotateX（-60deg）rotateY（19.5deg）translateX（-116px）transY(-16px)transY（-16px26plateZ16px）trans );變換：rotateX（-60deg）rotateY（19.5deg）translateX（-116px）translateY（-200px）translateZ（326px）；} 風格> 現在開始相關程式碼的講解。 html程式碼跟之前的差不多，就是多了三個div，分別作為四個面體的另外三個面。 css程式碼中，我們使用#pyramid > div:nth-child(n) 找到三個面體的四個面，設定邊框四個邊的顏色，將它們分別定義成三角形。透過transform屬性的rotateX，rotateY，translateX，translateY和translateZ方法，設定它們在3維空間中的角度、站立和位置。這裡牽涉到許多數學知識，大家需要去補充相關知識。 透過上述設置，四個面體就形成了。接下來就是創造動畫效果。這裡使用的東西也很簡單，就是動畫和關鍵影格。 css3相關屬性，大家可以到http://www.w3schools.com/css3/default.asp站點學習，我這裡就不多去講解了。 本文到此為止，大家可以把html和css程式碼貼在一起，查看最終效果。 程式碼裡面可能有不懂的內容，大家留言給我。
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Discussion sur la taille du site Web lors de la création d'un site Web à écran tactile à l'aide des compétences du didacticiel html5_html5Article suivant：Discussion sur la taille du site Web lors de la création d'un site Web à écran tactile à l'aide des compétences du didacticiel html5_html5