L'effet flop de la carte 3D de Baidu Tieba
Cette fois, je vais vous présenter l'effet de retournement de carte 3D de Baidu Tieba. Quelles sont les précautions pour obtenir l'effet de retournement de carte 3D de Baidu Tieba. Ce qui suit est un cas pratique, jetons un coup d'œil. .
Aujourd'hui, je vais vous présenter un effet flip créé par CSS3 Lorsque vous déplacez la souris sur un élément, vous pouvez sentir que vous pouvez voir les informations derrière l'élément. Si vous faites du Lianliankan, des jeux de type poker qui testent votre mémoire, ou même écrivez quelques mots à votre petite amie, vous pouvez l'essayer après les avoir mis dans l'album photo créé à partir de cet exemple, ha~
Rendu :
Quelques nouveaux attributs CSS3 utilisés dans l'exemple :
a, -webkit -perspective : 800px;
perspective (perspective, angle de vue) : Propriété définit la distance de l'élément 3D à la vue, en pixels. Cette propriété vous permet de modifier la vue de l'élément 3D. Détermine si ce que vous voyez est une transformation 2D ou une transformation 3D.
b, -webkit-transform-style:preserve-3d;
L'attribut transform-style spécifie comment les éléments imbriqués sont rendus dans l'espace 3D. La valeur par défaut est plate, nous utilisons l'effet 3D, puis sélectionnons 3D.
c, -webkit-backface-visibility : caché ; Indique s'il faut afficher l'élément sélectionné après sa rotation vers l'arrière.
d, -webkit-transform: rotateY(0); L'élément tourne autour de l'axe Y.
Les attributs ci-dessus vous donneront d'abord une compréhension perceptuelle. Après avoir lu les exemples, vous pourrez ensuite goûter attentivement ces attributs, ou Baidu ou Google.
Exemple :
Html :
<body> <p id="content"> <ul> <li> <a href="#" target="_blank"> <p><img alt="" src="images/1.jpg"/></p> <p> <h3>漩涡鸣人</h3> <p>日本漫画家岸本齐史作品《火影忍者》中男主角。因为身上封印着邪恶的九尾妖狐，无父无母的他受尽了村人的冷眼与歧视，他下定决心要成为第六代火影，让所有人都认同他的存在。</p> </p> </a> </li> <li> <a href="#" target="_blank"> <p> <img alt="" src="images/2.jpg"/> </p> <p> <h3>日向雏田</h3> <p> 日本漫画家岸本齐史作品《火影忍者》中的3号女主角。木叶忍者村的女忍者，木叶名门日向一族宗家族长的长女。喜欢漩涡鸣人，原本是个性格柔弱的女孩，但是在鸣人的影响下逐渐变得坚强，并逐渐成长为一名优秀的忍者。</p> </p> </a> </li> <li> <a href="#" target="_blank"> <p><img alt="" src="images/3.jpg"/></p> <p> <h3>蒙奇·D·路飞</h3> <p>蒙奇·D·路飞 是日本人气动漫 《海贼王》中的主人公。是日本人气动漫 《海贼王》中的主人公。草帽海贼团船长，梦想是找到传说中的宝藏 —— ONE PIECE，成为海贼王。</p> </p> </a> </li> <li> <a href="#" target="_blank"> <p> <img alt="" src="images/4.jpg"/> </p> <p> <h3>盒子先生</h3> <p> Danbo是一只用废纸盒DIY出来的可爱玩偶，圆圆的眼睛和三角形的嘴巴，时刻露出无辜的表情，让人看到就心软，Danbo是个纯真善良的小家伙，在它单纯的幻想世界里，总是透露出最纯真可爱的动人气息。</p> </p> </a> </li> </ul> </p> </body>
C'est quand même assez simple :
ul est un ensemble d'images, et chaque li a un( Parce que nous espérons que cliquer sur l'image peut sauter), a contient deux p, l'un est lorsqu'il est affiché normalement (c'est-à-dire que l'image est affichée) et l'autre est affiché après la rotation de l'image (c'est-à-dire l'introduction) .
CSS :
<link href="css/reset.css" rel="stylesheet" type="text/css">
<style type="text/css">
body
{
font-size: 14px;
font-family: Microsoft YaHei, Tahoma, Geneva, sans-serif;
background: #111;
}
#content ul
{
width: 960px;
margin: 150px auto;
padding: 60px 0;
}
#content ul li
{
margin-right: 20px;
width: 225px;
height: 180px;
float: left;
}
#content ul li:last-child
{
margin-right: 0;
}
#content ul li a
{
position: relative;
display: block;
width: 100%;
height: 100%;
/*舞台（动画元素的父容器）perspective*/
-webkit-perspective: 800px;
-moz-perspective: 800px;
}
#content ul li a > p
{
position: absolute;
left: 0;
height: 0;
width: 100%;
height: 100%;
color: #fff;
/*动画元素transform-style*/
-webkit-transform-style: preserve-3d;
-webkit-transition: .8s ease-in-out ;
/*动画元素背后设置为hidden*/
-webkit-backface-visibility: hidden;
}
#content ul li a p:first-child
{
/*
绕y轴旋转
*/
-webkit-transform: rotateY(0);
z-index: 2;
}
#content ul li a p:last-child
{
background: url("images/bg.jpg") no-repeat 0 0;
-webkit-transform: rotateY(180deg);
z-index: 1;
}
#content ul li a:hover p:first-child
{
-webkit-transform: rotateY(-180deg);
}
#content ul li a:hover p:last-child
{
-webkit-transform: rotateY(0);
}
#content ul li a p h3
{
margin: 0 auto 15px;
padding: 15px 0;
width: 200px;
height: 16px;
line-height: 16px;
font-size: 14px;
text-align: center;
border-bottom: 1px #fff dashed;
}
#content ul li a p p
{
padding: 0 10px;
font-size: 12px;
text-indent: 2em;
line-height: 18px;
}
</style>D'accord, dans le CSS ci-dessus, vous pouvez trouver les propriétés CSS mentionnées plus tôt dans l'article.
1. La chose la plus importante est de comprendre rotateY, qui tourne autour de l'axe y. rotateY tourne littéralement autour de l'axe y. Quelqu'un doit demander où se trouve l'axe y :
. 
Le point central par défaut de l'élément pivoté est le centre de rotation (peut être modifié via transform-origin. Les axes x et y sont sur le graphique, et l'axe z est la flèche qui va). depuis le centre (c'est la flèche qui tire vers votre tête depuis l'écran).
Dans notre exemple, l'image par défaut rotateY=0 ; le pointeur de la souris est rotateY=-180, un nombre négatif signifie une rotation dans le sens inverse des aiguilles d'une montre autour de l'axe y, un nombre positif signifie une rotation dans le sens des aiguilles d'une montre ; deux autres axes ;
Le cœur de notre exemple est que lorsque la souris pointe sur : l'image (p:premier enfant), elle tourne de 180 degrés dans le sens inverse des aiguilles d'une montre autour de l'axe y de 0 degrés à -180 degrés ; l'introduction (p:last-child) commence à 180. Faites une rotation de 180 degrés dans le sens inverse des aiguilles d'une montre autour de l'axe y pour atteindre 0 degré. Crée l’effet de deux rotations simultanées dans le sens inverse des aiguilles d’une montre. Certaines personnes peuvent se demander pourquoi l'introduction par défaut n'est pas à 0 degré. Notez ici que l'introduction est dans un état frontal après avoir été tournée de 180 degrés dans le sens inverse des aiguilles d'une montre, donc lorsque l'image est couverte, cela équivaut à une rotation de 180 degrés dans le sens des aiguilles d'une montre par rapport à la normale. état, car lorsque la souris pointe, il faut revenir à la normale.
Perspective, il existe une astuce pour planter le décor (l'élément parent de l'animation).
Les changements 3D du style Transform sont bien sûr en 3D, il n'y a pas grand chose à dire.
Il existe de nombreux autres attributs liés à l'effet 3D de CSS3 S'il y a une opportunité, j'utiliserai délibérément ceux inutilisés dans les exemples futurs~
Cliquez pour télécharger le code source. .
Nous apprécions les conseils de chacun~ D'ailleurs, cet exemple doit être exécuté sous Chrome. Firefox ne semble pas très bien le supporter. Chrome est automatiquement utilisé, et Firebug est rarement utilisé~ Hehe~
Je le crois. Après avoir lu le cas dans cet article, vous maîtrisez la méthode. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de PHP ! Lecture recommandée :Explication détaillée de l'utilisation du sélecteur multi-classe CSS3
Explication détaillée de l'utilisation du fond CSS- pièce jointe
Exemple d'animation CSS3 de clic pour agrandir
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!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
Video Face Swap
Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Sujets chauds
1393
52
1207
24
Les utilisateurs rencontrent de rares problèmes : les montres intelligentes Samsung Watch rencontrent soudainement des problèmes d'écran blanc
Apr 03, 2024 am 08:13 AM
Vous avez peut-être rencontré le problème des lignes vertes apparaissant sur l'écran de votre smartphone. Même si vous ne l'avez jamais vu, vous avez sûrement vu des images associées sur Internet. Alors, avez-vous déjà rencontré une situation où l’écran de la montre intelligente devient blanc ? Le 2 avril, CNMO a appris par des médias étrangers qu'un utilisateur de Reddit avait partagé une photo sur la plateforme sociale, montrant l'écran des montres intelligentes de la série Samsung Watch devenant blanc. L'utilisateur a écrit : « J'étais en train de charger quand je suis parti, et quand je suis revenu, c'était comme ça. J'ai essayé de redémarrer, mais l'écran était toujours comme ça pendant le processus de redémarrage. L'écran de la montre intelligente Samsung Watch est devenu blanc. L'utilisateur de Reddit n'a pas précisé le modèle spécifique de la montre intelligente. Cependant, à en juger par l’image, il devrait s’agir de la Samsung Watch5. Auparavant, un autre utilisateur de Reddit avait également signalé
Examen du radiateur Kyushu Fengshen Assassin 4S Style 'Assassin Master' refroidi par air
Mar 28, 2024 am 11:11 AM
En parlant d'ASSASSIN, je pense que les joueurs penseront certainement aux maîtres assassins d'"Assassin's Creed". Ils sont non seulement talentueux, mais ont aussi le credo de "se consacrer aux ténèbres et au service de la lumière". châssis/alimentation/refroidissement domestiques bien connus La série ASSASSIN de radiateurs refroidis par air phares de la marque d'appareils DeepCool coïncide les uns avec les autres. Récemment, le dernier produit de cette série, ASSASSIN4S, a été lancé "Assassin in Suit, Advanced" et apporte une nouvelle expérience de refroidissement par air aux joueurs avancés. L'apparence est pleine de détails. Le radiateur Assassin 4S adopte une structure à double tour + un seul ventilateur intégré. L'extérieur est recouvert d'un carénage en forme de cube, qui a un fort sens général. Couleurs pour répondre à différentes couleurs.
Art exquis de la lumière et de l'ombre au printemps, Haqu H2 est le choix rentable
Apr 17, 2024 pm 05:07 PM
Avec l’arrivée du printemps, tout renaît et tout est plein de vitalité et de vitalité. En cette belle saison, comment ajouter une touche de couleur à votre intérieur ? Le projecteur Haqu H2, avec son design exquis et son excellent rapport coût-efficacité, est devenu une beauté indispensable ce printemps. Ce projecteur H2 est compact mais élégant. Qu'il soit placé sur le meuble TV du salon ou à côté de la table de chevet dans la chambre, il peut devenir un magnifique paysage. Son corps est fait d'une texture mate blanc laiteux. Cette conception donne non seulement au projecteur un aspect plus avancé, mais augmente également le confort du toucher. Le matériau texturé en cuir beige ajoute une touche de chaleur et d'élégance à l'apparence générale. Cette combinaison de couleurs et de matériaux est non seulement conforme à la tendance esthétique des maisons modernes, mais peut également être intégrée dans
Test de l'alimentation à module complet Huntkey MX750P : 750 W de puissance concentrée en platine
Mar 28, 2024 pm 03:20 PM
Grâce à sa taille compacte, la plate-forme ITX a attiré de nombreux acteurs à la recherche d'une beauté ultime et unique. Grâce à l'amélioration des processus de fabrication et aux progrès technologiques, les cartes graphiques Intel Core de 14e génération et les séries RTX40 peuvent exercer leur force sur la plate-forme ITX. les joueurs ont également des exigences plus élevées en matière d'alimentation SFX. Huntkey, passionné de jeux, a lancé une nouvelle alimentation de la série MX dans la plate-forme ITX qui répond aux exigences de haute performance, l'alimentation à module complet MX750P a une puissance nominale allant jusqu'à 750 W et a passé la certification de niveau platine 80PLUS. Ci-dessous, nous apportons l’évaluation de cette alimentation. L'alimentation à module complet Huntkey MX750P adopte un concept de design simple et à la mode. Il existe deux modèles en noir et blanc parmi lesquels les joueurs peuvent choisir. Les deux utilisent un traitement de surface mat et ont une bonne texture avec des polices gris argenté et rouge.
Comprenez facilement les images 4K HD ! Ce grand modèle multimodal analyse automatiquement le contenu des affiches Web, ce qui le rend très pratique pour les travailleurs.
Apr 23, 2024 am 08:04 AM
Un modèle volumineux capable d'analyser automatiquement le contenu des PDF, des pages Web, des affiches et des graphiques Excel n'est pas très pratique pour les travailleurs. Le modèle InternLM-XComposer2-4KHD (en abrégé IXC2-4KHD) proposé par Shanghai AILab, l'Université chinoise de Hong Kong et d'autres instituts de recherche en fait une réalité. Par rapport à d'autres grands modèles multimodaux qui ont une limite de résolution ne dépassant pas 1 500 x 1 500, ce travail augmente l'image d'entrée maximale des grands modèles multimodaux à une résolution supérieure à 4K (3 840 x 1 600) et prend en charge n'importe quel rapport d'aspect et 336 pixels en 4K. Changements de résolution dynamiques. Trois jours après sa sortie, le modèle était en tête de la liste de popularité des modèles de réponses visuelles aux questions HuggingFace. Facile à manier
Comment supprimer vos propres publications dans Baidu Tieba Liste des méthodes pour supprimer vos propres publications
Mar 12, 2024 pm 05:25 PM
Lorsque nous utilisons cette plate-forme, nous devrions tous être familiers avec certaines des fonctions ci-dessus. Quel que soit l'aspect dans lequel nous nous trouvons, nous pouvons voir qu'il y a beaucoup de messages dessus. Bien sûr, nous pouvons également y publier nous-mêmes. Certains messages et ainsi de suite, donc à chaque fois vous sentirez que certains choix dans différents aspects sont disponibles, donc aujourd'hui afin de mieux comprendre l'utilisation des fonctions ci-dessus, et d'assurer la qualité de nos messages, j'ai directement la possibilité de supprimez certains des messages ci-dessus, mais si vous ne savez pas comment faire, aujourd'hui l'éditeur vous expliquera comment le supprimer. Amis intéressés et ayant des idées, veuillez contacter l'éditeur maintenant. Jetons un coup d'oeil, je. je pense que tu l'aimeras. Supprimer
Test du Colorful Hidden Star P15 24 : un ordinateur portable de jeu polyvalent avec une belle apparence et des performances
Mar 06, 2024 pm 04:40 PM
Dans l’ère actuelle de développement technologique rapide, les ordinateurs portables sont devenus un outil indispensable et important dans la vie quotidienne et au travail des gens. Pour les joueurs qui ont des exigences de performances élevées, un ordinateur portable doté d’une configuration puissante et d’excellentes performances peut répondre à leurs besoins les plus exigeants. Avec ses excellentes performances et son design époustouflant, l'ordinateur portable Colorful Hidden Star P15 est devenu le leader du futur et peut être qualifié de modèle d'ordinateurs portables durs. Colorful Hidden Star P1524 est équipé d'un processeur Intel Core i7 de 13e génération et d'un GPU RTX4060Laptop. Il adopte un style de conception de vaisseau spatial plus à la mode et offre d'excellentes performances dans les détails. Jetons d'abord un coup d'œil aux fonctionnalités de ce portable. Supreme équipé du processeur Intel Core i7-13620H
L'écran est idéal pour jouer à des jeux. Brève analyse de l'écran iQOO Neo9S Pro+.
Jul 19, 2024 pm 03:53 PM
Sur le marché actuel des smartphones, la qualité de l'écran est devenue l'un des indicateurs clés pour mesurer les performances globales d'un téléphone mobile. La série Neo d'iQOO s'est toujours engagée à offrir aux utilisateurs une excellente expérience de jeu et un plaisir visuel. Le dernier produit iQOO Neo9SPro+ utilise un « écran de jeu à trois bonnes protections oculaires ». Ensuite, jetons un coup d'œil à la qualité de cet écran. iQOO Neo9S Pro+ est équipé d'un écran direct e-sports 1,5 KOLED, qui prend en charge le taux de rafraîchissement adaptatif phare LTPO de 1 Hz à 144 Hz, ce qui signifie qu'il peut atteindre un état de veille à très faible consommation lors de l'affichage de contenu statique, et il peut également être intelligent pendant le jeu. Passez à la dynamique élevée de 90 Hz à 144 Hz.
