Ce qui est acceptable jusqu’à ce que vous essayiez de les faire pivoter sur l’ axe des x ou sur l’ axe des y comme le cube dans mon premier exemple … voici ce qui se passe: (exemple simplifié)
Comment créer une sphère sortingdimensionnelle réelle avec du CSS pur?Plus précisément, celui qui est couvert – pas seulement un cadre – et n’implique pas des centaines d’éléments HTML.
Remarques:
Les sphères sortingdimensionnelles ont la hauteur, la largeur et la profondeur – tout comme le cube dans mon premier exemple
Je n’ai pas besoin de physique et aucune interaction avec l’utilisateur n’est nécessaire. Juste une sphère tournante animée.
Ressources additionnelles:
paulrhayes.com – Sphères
3D (2d illusion) Terre avec animation tournante avec CSS
Ssortingctement parlant, toute forme “3D” sur un écran plat est davantage une illusion d’un object 3D. Tout ce que nous voyons est une projection 2D de cette forme sur le plan de l’écran, et notre cerveau fait de son mieux pour deviner quelle forme pourrait donner la projection que nous voyons. Si la projection change, notre cerveau l’interprète comme un object 3D changeant d’orientation, ce qui l’aide à mieux déterminer la forme de cet object.
Cela fonctionne bien avec des objects non symésortingques et des objects fabriqués à partir de polygones (par exemple, des cubes), mais la sphère est un cas très particulier: sa projection sur le plan ne donne toujours qu’un cercle. La sphère statique et la sphère rotative ont la même projection, le même cercle. Même dans la vraie vie, si nous regardons une sphère avec une surface uniforme sans aucune marque (par exemple, une boule de métal polie), il est difficile de déterminer si elle rest immobile ou tourne. Nos yeux ont besoin de quelques conseils, certains détails se déplacent le long de la surface de la sphère en fonction de sa géomésortinge. Plus ces détails se déplacent de la manière que vous attendez des points de la surface sphérique à déplacer, plus la perception de la sphère en rotation est claire.
Et voici la clé du problème en créant une scène CSS qui donnerait une telle perception: pour que cette illusion soit suffisamment forte, nous avons besoin de nombreuses marques qui se déplacent le long des chemins qui se trouvent dans des plans différents. Et la seule façon d’obtenir ceci en CSS est d’avoir chaque marque en tant que boîte CSS distincte (élément ou pseudo-élément). Si notre sphère ne comprend que des marques en mouvement, nous en avons vraiment besoin pour la voir comme une sphère – donc “des centaines d’éléments” dans la plupart des démonstrations que vous avez vues.
Donc, si vous voulez rendre une sphère réaliste avec un nombre raisonnablement réduit d’éléments, vous devrez probablement combiner les effets qui font une “illusion” d’une forme sphérique de base statique (un cercle avec des dégradés radiaux, des ombres intérieures, etc.) avec des éléments relativement petits (pour rendre moins évident qu’ils sont plats), orientés le long de la surface de la sphère avec des transformations 3D et animés – de la même manière que les faces du cube de votre première démo.
Voici ma propre tentative pour mettre cette approche en pratique. J’ai utilisé 20 éléments circulaires orientés à peu près comme les faces de l’ icosaèdre régulier (comme des hexagones blancs sur le ballon de football classique). Je les ai regroupés en deux groupes constituant chacun un hémisphère pour plus de commodité (ce n’était pas nécessaire, mais cela simplifiait le style). Toute la scène 3D comprend la sphère elle-même et le cadre d’arrière-plan (pseudo-élément) qui traverse la sphère près de son centre (un peu plus près pour réduire le “scintillement” des cercles à mesure ) et fait toujours face à l’écran. Donc 24 éléments au total (pas littéralement “des centaines”, au moins :). Pour rendre les cercles plus “bombés” (comme des segments sphériques), j’ai ajouté deux pseudo-éléments à chacun d’eux et les ai légèrement surélevés l’un par rapport à l’autre. Fonctionne mieux dans Chrome et Firefox 57+ (dans Firefox 56 et iOS Safari, il y a encore du scintillement près des bords). Si vous survolez le cercle, vous pouvez voir la scène sans le cadre d’arrière-plan (et aussi sans “scintiller”). Une version légèrement modifiée est également disponible sur Codepen .
Comment créer une sphère sortingdimensionnelle réelle avec du CSS pur?
Eh bien, comme beaucoup l’ont indiqué dans les réponses et les commentaires, il est tout simplement impossible de créer une seule entité 3D dans un navigateur avec HTML et CSS uniquement à ce stade, mais il est possible de créer une illusion d’object 3D. Voici mon approche pour résoudre le problème.
Pour donner à un œil humain la capacité de voir un object sphérique, il faut que les points de référence suivent. Dans mon cas, ce sont les lignes qui définissent la forme de la sphère. Les lignes sont obtenues en donnant une bordure à 5 éléments de l’axe des axes X et 5 éléments à l’axe des Y. Seules les séries X / Y se voient atsortingbuer une bordure, car cela suffit à fournir une référence suffisante pour créer l’illusion d’une sphère. Les lignes supplémentaires sur l’axe Z sont simplement encombrantes et inutiles. Si toutes les lignes sont désactivées, le tout apparaît comme une sphère “parfaite” (ressemble à un cercle, mais toutes les parties sont en mouvement et sont présentes sur le plan 3D dans le navigateur!).
Ce que j’ai fait:
Création de 15 éléments HTML qui représenteront chacun un cercle divisé en 3 séries de 5
La raison de tous ces ensembles est que lorsque l’ensemble de l’outil est tourné sur les axes x, y et z, les arrière-plans de chacun des éléments des ensembles x, y et z remplissent les espaces vides les uns pour les autres.
Chaque ensemble de 5 éléments est pivoté sur les axes X, Y et Z respectivement par incréments de 36 degrés.
Tous les éléments sont arrondis en utilisant border-radius:50%;
Définir l’arrière-plan des éléments du cercle sur une couleur unie
Rassemble les ensembles pour qu’ils se chevauchent
Couper les lacunes mineures résultant de l’insuffisance d’éléments couvrant les espaces vides entre les cercles x, y et z en utilisant un clip-path: circle(96px at center); sur le récipient, et jeté un effet d’ombre / lumière frais pour sceller le marché contre
Plus de cercles se traduiront par une sphère moins “nerveuse”, mais comme la performance est accentuée dans la question, un clip rapide de la chose entière semblait être la chose à faire
En guise de conclusion, je voulais exprimer mon appréciation de la question posée, cela m’a vraiment fait réfléchir et ce fut un excellent projet qui m’a permis d’apprendre beaucoup de choses sur les capacités 3D de HTML / CSS.
Merci également à toutes les personnes qui ont passé du temps à ouvrir cette porte et ont trouvé des solutions géniales au problème.
J’espère que les fruits de mes recherches sont utiles. À votre santé!
Ce stylo est également basé sur l’exemple de Timo Korinth.
Comme déjà mentionné ci-dessus, CSS3 ne peut pas vous fournir de vraies formes 3D, mais simplement avec l’illusion. Une bonne illusion de sphère qui utilise des éléments HTML minimum et utilise l’image comme texture peut être réalisée en combinant ce que vous avez fait et en masquant tout avec les ombres CSS.
Une touche intéressante qui rend le masque plus réaliste est l’utilisation du pseudo-élément :after pour créer une étincelle supplémentaire dans un emplacement décalé et une taille plus petite. Un élément clé pour un effet réussi est de se rappeler que différents matériaux reflètent différemment la lumière. Cela signifie que si vous essayez de créer une sphère métallique, l’éclairage créé par l’ box-shadow la box-shadow sera différent de celui de la sphère plastique.
Un autre ajout intéressant est l’utilisation du pseudo-élément :before pour la création d’un effet de reflection. Ajouter une image prédéfinie du monde sur une sphère avec une certaine opacité peut créer un effet très persuasif. remarquez également que le matériau que vous essayez de créer déterminera la quantité d’opacité que vous souhaitez pour la reflection.
Remarquez que j’ai utilisé un prisme octogonal pour avoir l’image derrière la scène afin de la regarder plus en détail lorsque la forme 3D applique sa perspective. Même avec seulement 8 éléments, le résultat est assez réaliste. Des résultats plus réalistes peuvent être obtenus avec plus de polygones et de formes et de mappages de texture plus complexes, mais même sans nécessité de trop d’éléments en raison de l’ajout de l’ombre et de l’étincelle au-dessus de tout.
Enfin, afin de masquer le rest du prisme octogonal et d’afficher uniquement les parties à l’intérieur des bornes de la sphère, j’utilise le clip-path: circle(99px at center); .
Non, ce n’est pas possible selon vos critères. Tous les exemples de trucs 3D utilisant uniquement HTML et CSS ont des problèmes de performances, car ce n’est pas son objective.
En ce qui concerne les effets graphiques lourds, HTML et CSS sont vraiment mauvais.
La meilleure façon de créer une vraie sphère 3D consiste à utiliser WebGL, une API JavaScript permettant de créer du contenu 3D.
Jetez un oeil à cela – sonner comme ce dont vous avez besoin et avec des extraits de code que vous pouvez, espérons-le, modifier à votre guise. https://codepen.io/Mamboleoo/post/sphere-css
HTML
.mommy .daddy - for (var x = 1; x < 300; x++) span
Voici un exemple de sphère / bulle animée, bien que cet exemple soit plus une illusion. Je ne sais pas si tout ce que vous demandez est possible uniquement par le biais de CSS, mais je me trompe peut-être.
contre 