Logische Operationen mit CSS-Variablen

0
5

Sehr oft, während Sie für die switch-Variablen (eine variable, die entweder 0 oder 1, ein Konzept, das erläutert im größeren detail in diesem Beitrag), ich wünschte, ich könnte führen logische Operationen auf Ihnen. Wir haben nicht die Funktionen wie not(var(–i)) oder und(var(–i), var(–k)) in CSS, aber wir emulieren kann diese und mehr mit arithmetischen Operationen in einem calc () – Funktion.

Dieser Artikel wird Ihnen zeigen, welche calc () – Formeln brauchen wir für jede logische operation und erklären, wie und warum Sie eingesetzt werden, mit ein paar Anwendungsfälle, die dazu führen, das schreiben von diesem Artikel.

Wie: die Formeln

nicht

Dies ist ein ziemlich einfach: wir subtrahieren die switch-variable (nennen wir es –j) von 1:

–notj: calc(1 – var(–j))

Wenn –j 0 ist, dann –notj ist 1 (1 – 0). Wenn j 1 ist, dann –notj ist 0 (1 – 1).

und

Nun, wenn Sie jemals die Elektronik-Klassen (besonders so etwas wie die Programmierten logischen Systeme oder Integrierte Schaltungen), dann wissen Sie bereits, welche Formel müssen wir hier zu verwenden. Aber lasst uns nicht springen Sie direkt hinein.

Die und der beiden Operanden wahr ist, wenn und nur wenn beide Bedingungen erfüllt sind. Die beiden Operanden, die in unserem Fall sind zwei Schalter Variablen (nennen wir Sie-k-und-ich). Jeder von Ihnen kann entweder 0 oder 1, unabhängig von den anderen. Das heißt, wir können in einem von vier möglichen Szenarien:

  • –k: 0, –ich: 0
  • –k: 0, –ich: 1
  • –k: 1, –i: 0
  • –k: 1, –i: 1

Das Ergebnis der and-operation ist 1, falls beide unsere switch-Variablen sind 1 und 0 sonst. Es bei der Suche in die andere Richtung, dieses Ergebnis ist 0, wenn mindestens einer der beiden Schalter-Variablen ist 0.

Nun müssen Sie denken Sie an es auf diese Weise: das Ergebnis der arithmetischen operation ist 0, wenn mindestens einer der beiden Operanden 0 ist? Das ist die Multiplikation, denn die Multiplikation etwas durch 0 gibt uns 0!

Also, unserer –und-Formel ist:

–und: calc(var(–k)*var(–i))

Wenn man bedenkt, jede unserer vier mögliche Szenarien, die wir haben:

  • für –k: 0, –ich: 0 haben wir –und ist in 0 (0*0)
  • für –k: 0, –ich: 1 haben wir –und ist in 0 (0*1)
  • für –k: 1, –i: 0 haben wir das-und 0 (1*0)
  • für –k: 1, –i: 1 haben wir –und ist 1 (1*1)

nand

Da nand-nicht und müssen wir ersetzen das –j in der keine Formel mit der Formel für und:

–nand: calc(1 – var(–k)*var(–i))

Für jedes unserer vier Szenarien möglich, erhalten wir:

  • für –k: 0, –ich: 0 haben wir das –nand ist 1 (1 – 0*0 = 1 – 0)
  • für –k: 0, –ich: 1 haben wir, dass –nand ist 1 (1 – 0*1 = 1 – 0)
  • für –k: 1, –i: 0 haben wir das –nand ist 1 (1 – 1*0 = 1 – 0)
  • für –k: 1, –i: 1 haben wir, dass –nand ist 0 (1 – 1*1 = 1 – 1)

oder

Das Ergebnis der or-operation ist 1, wenn mindestens ein Schalter Variablen 1 ist, und 0 sonst (wenn beide 0 sind).

Der erste Instinkt ist hier zu gehen, für die Ergänzung, aber, die gibt uns 0, wenn beide –k –und ich sind 0 und 1, wenn man 0 und der andere 1 ist, es gibt uns 2, wenn beide 1 sind. So, dass funktioniert nicht wirklich.

Aber wir können die gute alte De-Morgan-Gesetze, von denen es heißt:

nicht (A oder B) = (nicht A) und (nicht B)

Dies bedeutet, dass das Ergebnis der oder-operation ist die negation der und-operation zwischen der Negationen von –k-und-ich. Die Umsetzung von CSS, wir haben:

– oder: calc(1 – (1 – var(–k))*(1 – var(–i)))

Für jedes Szenario erhalten wir:

  • für –k: 0, –ich: 0 haben wir das –oder ist 0 (1 – (1 – 0)*(1 – 0) = 1 – 1*1 = 1 – 1)
  • für –k: 0, –ich: 1 haben wir das –oder ist 1 (1 – (1 – 0)*(1 – 1) = 1 – 1*0 = 1 – 0)
  • für –k: 1, –i: 0 haben wir das –oder ist 1 (1 – (1 – 1)*(1 – 0) = 1 – 0*1 = 1 – 0)
  • für –k: 1, –i: 1 haben wir das –oder ist 1 (1 – (1 – 1)*(1 – 1) = 1 – 0*0 = 1 – 0)

noch

Da noch nicht oder wir haben:

–noch auch: calc((1 – var(–k))*(1 – var(–i)))

Für jedes unserer vier Szenarien möglich, erhalten wir:

  • für –k: 0, –ich: 0 haben wir das –noch ist 1 ((1 – 0)*(1 – 0) = 1*1)
  • für –k: 0, –ich: 1 haben wir, dass-noch ist 0 ((1 – 0)*(1 – 1) = 1*0)
  • für –k: 1, –i: 0 haben wir das –noch ist 0 ((1 – 1)*(1 – 0) = 0*1)
  • für –k: 1, –i: 1 haben wir, dass-noch ist 0 ((1 – 1)*(1 – 1) = 0*0)

xor

Das Ergebnis der xor-operation ist 1, wenn einer der beiden Operanden 1 ist, und der andere 0 ist. Das fühlt sich schwieriger auf den ersten, aber, wenn wir denken, dass dies bedeutet, dass die beiden Operanden müssen unterschiedlich sein, das Ergebnis 1 (ansonsten 0), stolpern wir auf die richtige Rechenoperation zu verwenden in calc(): Subtraktion!

Wenn –k –und ich gleich sind, dann subtrahieren –i –k gibt uns 0. Ansonsten, wenn wir –k: 0, –ich: 1, ist das Ergebnis der gleichen Subtraktion -1; wenn wir –k: 1, –i: 0, das Ergebnis ist 1.

In der Nähe, aber nicht ganz! Bekommen wir das Ergebnis wollen wir in drei von vier Szenarien, aber wir brauchen, um 1, nicht -1 in der –k: 0, –ich: 1 Szenario.

Jedoch, eine Sache, die -1, 0 und 1 gemeinsam haben, ist, dass die Multiplikation mit sich selbst gibt uns den absoluten Wert (die 1 ist für beide -1 und 1). So dass die eigentliche Lösung ist, um zu multiplizieren dieser Differenz mit sich selbst:

–xor: calc((var(–k) – var(–i))*(var(–k) – var(–i)))

Testen jedes unserer vier mögliche Szenarien, die wir haben:

  • für –k: 0, –ich: 0 haben wir, dass-xor ist 0 ((0 – 0)*(0 – 0) = 0*0)
  • für –k: 0, –ich: 1 haben wir, dass-xor ist 1 ((0 – 1)*(0 – 1) = -1*-1)
  • für –k: 1, –i: 0 haben wir, dass-xor ist 1 ((1 – 0)*(1 – 0) = 1*1)
  • für –k: 1, –i: 1 haben wir, dass-xor ist 0 ((1 – 1)*(1 – 1) = 0*0)

Warum: Use cases

Mal sehen, ein paar Beispiele, die machen verwenden von logischen Operationen in CSS. Beachten Sie, dass ich nicht ausführlich andere Aspekte dieser demos, wie Sie außerhalb des Geltungsbereichs dieses speziellen Artikels.

Ausblenden deaktiviert panel nur auf kleinen Bildschirmen

Dies ist ein Anwendungsfall stieß ich während der Arbeit an einer interaktiven demo, die Steuerung durch den Benutzer verschiedene Parameter zu ändern, ein sichtbares Ergebnis. Für mehr wissen die Nutzer, es gibt auch ein Gremium von erweiterten Steuerelementen, die standardmäßig deaktiviert ist. Es kann jedoch aktiviert werden, um Zugang zum manuellen Steuern noch mehr Parameter.

Da diese demo soll reagiert werden, die layout-änderungen, die mit der viewport. Wir wollen auch nicht die Dinge zu bekommen, vollgestopft mit kleineren Bildschirmen, wenn wir es vermeiden können, so gibt es keinen Punkt in die erweiterte Einstellungen, wenn Sie sind deaktiviert und wir sind in den schmalen Bildschirm Fall.

Die screenshot-collage unten zeigt die Ergebnisse, die wir bekommen für jede der vier möglichen Szenarien.

Collage der möglichen Fälle.

Also mal sehen, was das bedeutet in Bezug auf CSS!

First off, auf den <body> – wir nutzen einen switch, der geht von 0 in den schmalen Bildschirm Fall 1 in der Breite-Bildschirm Fall. Wir ändern auch die flex-Leitung auf diese Weise (wenn Sie möchten, eine detailliertere Erklärung, wie dies funktioniert, schauen Sie sich meinen zweiten Artikel auf TROCKEN-Wechsel mit CSS-Variablen).

body {
–k: var(–Breite, 0);
display: flex;
flex-direction: var(–Breite, Spalte);

@media (orientation: landscape) { –Breite: 1 }
}

Wir haben dann einen zweiten Schalter auf die erweiterten Einstellungen-panel. Dieser zweite Schalter ist 0, wenn das Feld nicht markiert ist, und 1, wenn das Markierungsfeld “aktiviert”. Mit Hilfe dieser Schalter, geben wir unsere erweiterte Steuerelemente panel, eine Behinderte suchen (über eine filter-Kette) und wir haben auch deaktivieren (via pointer-events). Hier, nicht in handliches kommt, wie wir wollen, um den Kontrast zu verringern und die Deckkraft der Behinderten-Fall:

.advanced {
– ich: var(–aktiviert, 0);
–noti: calc(1 – var(–i));
filter:
Kontrast(calc(1 – var(–noti)*.9))
Deckkraft(calc(1 – var(–noti)*.7));
pointer-events: var(–aktiviert, “none”);

[id=’toggle’]:checked ~ & { –enabled: 1 }
}

Wir wollen die erweiterten Einstellungen-panel zu bleiben erweitert wird, wenn wir uns in der Breite Bildschirm Fall (also, wenn –k 1), unabhängig davon, ob die checkbox aktiviert oder nicht, oder ob die checkbox aktiviert (also wenn-ich ist 1), unabhängig davon, ob wir in der Breite Bildschirm Fall ist oder nicht.

Genau das ist der oder-Betrieb!

So berechnen wir ein-oder variable:

.advanced {
/* gleich wie vorher */
– oder: calc(1 – (1 – var(–k))*(1 – var(–i)));
}

Wenn diese-oder-variable 0 ist, bedeutet dies, dass wir in den schmalen Bildschirm Fall und unser Kontrollkästchen nicht markiert ist, so wollen wir zu null die Höhe der erweiterten Einstellungen-panel und auch die vertikale margin:

.advanced {
/* gleich wie vorher */
Marge: calc(var(–oder -)*#{$mv}) 0;
height: calc(var(–oder -)*#{$h});
}

Dies ermöglicht uns, das gewünschte Ergebnis (live-demo).

Verwenden Sie die gleichen Formeln zu positionieren mehrerer Flächen eines 3D-Form

Dies ist ein Anwendungsfall stieß ich während der Arbeit auf das persönliche Projekt von CSS-ing der Johnson Feststoffe in diesem Sommer.

Werfen wir einen Blick auf eine dieser Formen, zum Beispiel, die gyroelongated fünfeckige Rotunde (J25), um zu sehen, wie logische Operationen sind hier sinnvoll.

Die Form, die wir wollen, zu bekommen.

Diese Form wird gebildet aus einem fünfeckige Rotunde, ohne das große dekagonale Basis und eine dekagonale antiprism ohne seine top-decagon. Die interaktive demo an, unten zeigt, wie diese zwei Komponenten können gebaut werden, indem man Ihre Netze von Gesichtern in 3D-und dann kam, um uns die Form, die wir wollen.

Finden Sie den Stift, indem Sie thebabydino (@thebabydino) auf CodePen.

Wie es oben zu sehen ist, die Gesichter sind entweder ein Teil der antiprism, oder ein Teil der Rotunde. Dies ist, wo wir Ihnen unsere erste switch-variable –ich. Dies ist 0 für die Gesichter, die ein Teil der antiprism und 1 für die Gesichter, die ein Teil der Rotunde. Die antiprism Gesichter sind Klasse .Mitte, da können wir eine andere hinzufügen Rotunde zu den anderen antiprism base und dann die antiprism in der Mitte. Die Rotunde Gesichter sind Klasse .cup, weil dieser Teil sieht aus wie eine Kaffeetasse… ohne einen Griff!

Die Rotunde sieht aus wie eine upside-down-up-Tasse ohne Griff.

.Mitte { –i: 0 }
.Tasse { –i: 1 }

Konzentriert sich nur auf die seitlichen Flächen, diese können einen Scheitelpunkt nach oben oder nach unten. Dies ist, wo wir Ihnen unsere zweite variable –k. Dieser ist 0, wenn Sie einen Scheitelpunkt nach oben zeigt (solche Gesichter haben .dir-Klasse) und 1, wenn Sie sind Umgekehrt und haben einen Scheitelpunkt der nach unten zeigt (diese Gesichter sind Klasse .rev)

.dir { –k: 0 }
.rev { –k: 1 }

Die antiprism hat 10 lateral faces (alle Dreiecke) nach oben weist, die jeweils an einer Kante der dekagonale Basis, die auch eine Basis für die zusammengesetzte Form. Es hat auch 10 lateral faces (alle Dreiecke wie gut) nach unten zeigt, die jeweils an einer Kante der anderen dekagonale base (die, die auch das dekagonale Basis der Rotunde und ist daher keine Basis für die zusammengesetzte Form).

Die Rotunde hat 10 seitlichen Flächen nach oben, abwechselnd Dreiecke und Fünfecke, die jeweils angebracht, um die dekagonale Basis, die auch eine Basis für die antiprism (es ist also keine Basis für die zusammengesetzte Form als auch). Es hat auch 5 seitlichen Flächen, die alle Dreiecke, die nach unten zeigt, die jeweils an einer Kante der fünfeckigen Basis.

Die interaktive Produkt-demo unter uns ermöglicht, besser zu sehen, jede dieser vier Gruppen von Gesichtern, durch die Hervorhebung nur eines auf Zeit. Sie können verwenden Sie die Pfeile am unteren Rand auswählen, welche Gruppe von Gesichtern wird hervorgehoben. Sie können auch die rotation um die y-Achse und ändern der Form kippen.

Finden Sie den Stift, indem Sie thebabydino (@thebabydino) auf CodePen.

Wie bereits erwähnt, sind die seitlichen Flächen können entweder Dreiecke oder Fünfecke:

.s3gon { –p -: 0 }
.s5gon { –p: 1 }

Da alle Ihrer seitlichen Flächen (.lat) sowohl der antiprism und der Rotunde haben eine Kante gemeinsam mit einem der beiden Basis-Flächen jeder Form, wir nennen diese gemeinsame Kanten der Basis Kanten der Seitenflächen.

Die interaktive Produkt-demo unter highlights diese Kanten, Ihre Endpunkte und Ihre mittleren Punkte und erlaubt das betrachten der Formen aus verschiedenen Blickwinkeln Dank der auto-Drehungen um die y-Achse, die gestartet/ angehalten, in jedem moment und die manuelle Rotationen um die x-Achse, die gesteuert werden können über die Schieberegler.

Finden Sie den Stift, indem Sie thebabydino (@thebabydino) auf CodePen.

Um die Dinge einfacher zu machen für uns selbst, setzen wir die transformieren-Herkunft des .lat Gesichter auf der Mitte Ihrer base Kanten (untere horizontale Kanten).

Hervorhebung der Basis-Kanten und Ihre Mittelpunkte (live).

Wir stellen auch sicher, dass wir position diese Gesichter wie diese Mittelpunkte Toten in der Mitte der Szene-element enthält unsere gesamte 3D-Form.

Mit den transform-origin fällt mit dem Mittelpunkt der Basis-Rand bedeutet, dass jede Drehung, führen wir auf einer Fläche passieren wird, um den Mittelpunkt Ihrer Basis Kante, dargestellt durch die interaktive Produkt-demo unter:

Finden Sie den Stift, indem Sie thebabydino (@thebabydino) auf CodePen.

Wir setzen die seitlichen Flächen, wo wir Sie haben wollen, in vier Schritten:

  1. Drehen wir Sie um Ihre y-Achse so, dass Ihre Basis-Kanten sind nun parallel zu Ihren endgültigen Positionen. (Dieser dreht auch Ihre lokalen Koordinatensystem die z-Achse eines Elements zeigt immer in die Richtung, dass element Gesichter.)
  2. Wir übersetzen Sie so, dass Ihre base Ränder Zusammenfallen mit Ihrer letzten Positionen (entlang der Kanten der Basis Gesichter der beiden Komponenten).
  3. Wenn Sie brauchen, um einen Scheitelpunkt der nach unten zeigt, drehen wir Sie um Ihre z-Achse eine halbe umdrehung.
  4. Wir drehen Sie um die x-Achse in Ihre endgültigen Positionen

Diese Schritte sind illustriert durch die interaktive demo unten, wo können Sie gehen durch Sie und drehen Sie die gesamte Form (mit der play – /pause-Taste für die y-Achse Drehung und den regler für die x-Achse rotation).

Finden Sie den Stift, indem Sie thebabydino (@thebabydino) auf CodePen.

Die y-Achse rotation-Wert wird meist auf der Basis von face-Indizes und weniger auf unsere Schalter, Variablen, obwohl es hängt davon ab, auf diese als gut.

Die Struktur ist wie folgt:

– var n = 5; //- Anzahl der Kanten/ Ecken, kleine base

Abschnitt.Szene
//- 3D-Form-element
.s3d
//- die Flächen, die jeweils eine 2D-Form-element – (.s2d)

//- lateral (.lat) antiprism (.Mitte) Gesichter,
//- die erste Hälfte nach oben (.dir), andere nach unten zeigt (.rev)
//- alle Dreiecke (.s3gon)
– für(var j = 0; j < 4*n; j++)
.s2d.Mitte.lat.s3gon(Klasse=j < 2*n ? ‘dir’ : ‘rev’)

//- lateral (.lat) Rotunde (.cup) Flächen, die nach oben zeigen (.dir),
//- die beiden Dreiecke (.s3gon) und Fünfecken (.s5gon)
– für(var j = 0; j < n; j++)
.s2d.cup.lat.s3gon.dir
.s2d.cup.lat.s5gon.dir
//- lateral (.lat) Rotunde (.cup) Gesichter, die nach unten zeigen (.rev)
//- alle Dreiecke (.s3gon)
– für(var j = 0; j < n; j++)
.s2d.cup.lat.s3gon.rev

//- Gesicht,
//- eine für die antiprism (.Mitte),
//- die andere für die Rotunde (.cup)
.s2d.Mitte.base(Klasse=`$s{2*n}gon`)
.s2d.cup.base(class=`N${n}gon`)

Das gibt uns die folgenden HTML-Code:

<section class=”Szene”>
<div class=”s3d”>
<!– SEITLICHE Gesichter –>
<div class=”s2d mid lat s3gon dir”></div>
<!– 9 mehr identische Gesichter,
so haben wir 10 seitliche antiprism Gesichter nach oben gerichtet –>

<div class=”s2d mid lat s3gon rev”></div>
<!– 9 mehr identische Gesichter,
so haben wir 10 seitliche antiprism Gesichter nach unten –>

<div class=”s2d-cup-lat s3gon dir”></div>
<div class=”s2d-cup-lat s5gon dir”></div>
<!– 4 weitere identische Paare,
so haben wir 10 seitliche Rotunde Gesichter nach oben gerichtet –>

<div class=”s2d-cup-lat s3gon rev”></div>
<!– 4 mehr identische Gesichter,
also wir haben 5 seitlichen Rotunde Gesichter nach unten –>

<!– Gesicht –>
<div class=”s2d Mitte der Basis s10gon”></div>
<div class=”s2d cup base s5gon”></div>
</div>
</section>

Dies bedeutet Gesichtern 0… 9 sind die 10 seitlichen antiprism Gesichter nach oben gerichtet, Gesichter 10… 19 sind die 10 seitlichen antiprism Flächen zeigen nach unten, die Gesichter 20… 29 sind die 10 seitlichen Rotunde Gesichter zeigen und die Flächen 30… 34 sind die 5 seitlichen Rotunde Gesichter nach unten zeigt.

Also, was wir hier tun, ist legen Sie eine index –idx auf den seitlichen Flächen.

$n: 5; // Anzahl der Kanten/ Ecken, kleine base

.lat {
@for $i von 0 bis 2*$n {
&:nth-child(#{2*$n}n + #{$i + 1}) { –idx: #{$i} }
}
}

Dieser index beginnt bei 0 für jede Gruppe der Flächen, was bedeutet, dass die Indizes für Flächen 0… 9, 10… 19 20… 29 gehen von 0 bis 9, während die Indizes für die Flächen 30… 34 gehen von 0 bis 4. Toll, aber wenn wir multiplizieren Sie einfach diese Indizes mit der Basis winkel1 der gemeinsamen decagon um die y-Achse rotation wir wollen uns bei diesem Schritt:

–ay: calc(var(–idx)*#{$ba10gon});

transform: rotatey(var(–ay))

…dann erhalten wir das folgende Ergebnis. Zeige ich das Endergebnis hier, weil es ist ein bisschen schwierig zu sehen, was falsch ist, indem man die zwischen-Ergebnis bekommen wir nach nur die Anwendung der rotation um die y-Achse.

Finden Sie den Stift, indem Sie thebabydino (@thebabydino) auf CodePen.

Das ist… nicht ganz das, was wir im Begriff waren, für!

Also mal sehen, was Probleme mit dem obigen Ergebnis hat und wie Sie zu lösen mit der Hilfe von unseren switch-Variablen und booleschen Operationen auf Ihnen.

Das erste Problem ist, dass die seitlichen antiprism Gesichter zeigen müssen ausgeglichen werden, indem die Hälfte eines regelmäßigen decagon Basis-Winkel. Dies bedeutet, dass beim hinzufügen oder entfernen von .5 aus –idx, bevor die Multiplikation mit der Basis-Winkel, sondern nur für diese Flächen.

Finden Sie den Stift, indem Sie thebabydino (@thebabydino) auf CodePen.

Die Gesichter, die wir ansprechen möchten sind die Gesichter für die beiden-ich und –k sind 0, also was müssen wir hier multiplizieren Sie das Ergebnis Ihrer noch mit .5:

–noch auch: calc((1 – var(–k))*(1 – var(–i)));
–j: calc(var(–idx) + var (- noch)*.5);
–ay: calc(var(–j)*#{$ba10gon});

transform: rotatey(var(–ay));

Das zweite Problem ist, dass die seitlichen Rotunde Gesichter nach unten sind nicht so verteilt, wie Sie sein sollten, so dass jeder von Ihnen hat eine base edge gemeinsam mit der Basis pentagon und die vertex gegen die base gemeinsam mit dem dreieckigen Rotunde Gesichter nach oben gerichtet. Dies bedeutet, dass die Multiplikation –idx durch 2, aber nur für diese Flächen.

Finden Sie den Stift, indem Sie thebabydino (@thebabydino) auf CodePen.

Was wir sind targeting-jetzt sind die Gesichter für die beiden-ich und –k 1 (also die Flächen, für die das Ergebnis der und-operation ist 1), so, was wir brauchen, ist, sich zu vermehren –idx mit 1 plus Ihre und:

–und: calc(var(–k)*var(–i));
–noch auch: calc((1 – var(–k))*(1 – var(–i)));
–j: calc((1 + var (- und))*var(–idx) + var (- noch)*.5);
–ay: calc(var(–j)*#{$ba10gon});

transform: rotatey(var(–ay));

Der nächste Schritt ist die übersetzung, für die wir translate3d(). Wir bewegen uns nicht jedes unserer Gesichter nach Links oder rechts, damit der Wert entlang der x-Achse ist immer 0. Wir verschieben Sie jedoch vertikal (entlang der y-Achse) und nach vorne (entlang der z-Achse)

Vertikal, wollen wir die cup-Gesichter, die Sie später bekommen, gedreht nach unten zeigen, um Ihre Basis Kante in der Ebene der kleinen (fünfeckigen) Basis der Tasse (und in der zusammengesetzten Form). Dies bedeutet, dass die Flächen, für die –ich ist 1, und-k 1 verschoben werden, bis (die negative Richtung) um die Hälfte der gesamten Höhe in der zusammengesetzten Form (eine Gesamthöhe, die wir berechnet haben, dass $h). So brauchen wir die und-operation hier.

// gleiche wie vorher
–und: calc(var(–i)*var(–k));
–y: calc(var(–und -)*#{- .5*$h});

transform: rotatey(var(–ay))
translate3d(0, var(–y, 0), var(–z, 0));

Wir wollen auch all den anderen cup-Gesichter sowie die antiprism Gesichter, die letztendlich den Punkt nach unten, um Ihre base edge in der gemeinsamen Ebene zwischen den Pokal und die antiprism. Dies bedeutet, dass die Flächen, für die –ich ist 1, und-k 0, sowie die Flächen für die –ich ist 0 und-k 1 übersetzt nach unten (positive Richtung) um die Hälfte der Höhe der zusammengesetzten Form, und dann wieder (negative Richtung) durch die Höhe der antiprism ($h-mid). Und was weißt du, das ist der xor-operation!

// gleiche wie vorher
–xor: calc((var(–k) – var(–i))*(var(–k) – var(–i)));
–und: calc(var(–i)*var(–k));
–y: calc(var(–xor)*#{.5*$h – $h-Mitte} –
var(–und -)*#{.5*$h});

transform: rotatey(var(–ay))
translate3d(0, var(–y, 0), var(–z, 0));

Schließlich wollen wir die antiprism Gesichter, bleibt dabei bis in den unteren sockel Ebene der zusammengesetzten Form (und der antiprism). Dies bedeutet, dass die Flächen, für die –ich ist 0 und-k ist 0 übersetzt nach unten (positive Richtung) um die Hälfte der gesamten Höhe in der zusammengesetzten Form. Also, was wir hier benutzen, ist die noch in Betrieb!

// gleiche wie vorher
–noch auch: calc((1 – var(–k))*(1 – var(–i)));
–xor: calc((var(–k) – var(–i))*(var(–k) – var(–i)));
–und: calc(var(–i)*var(–k));

–y: calc(var(–nor)*#{.5*$h} +
var(–xor)*#{.5*$h – $h-Mitte} –
var(–und -)*#{.5*$h});

transform: rotatey(var(–ay))
translate3d(0, var(–y, 0), var(–z, 0));

Finden Sie den Stift, indem Sie thebabydino (@thebabydino) auf CodePen.

Entlang der z-Richtung wollen wir uns bewegen, die Gesichter, so dass Ihre base Ränder Zusammenfallen mit den Kanten der Basis Gesichter der zusammengesetzten Form oder die Kanten von der gemeinsamen Basis (das ist nicht ein Gesicht in der zusammengesetzten Form) gemeinsam mit den beiden 3D-Komponenten. Für die oberen Flächen der Tasse (die wir später drehen nach unten zeigen), die Platzierung ist an den Rändern des pentagon, während für alle anderen Gesichter in der zusammengesetzten Form, die Platzierung ist an den Rändern des decagon.

Dies bedeutet, dass die Flächen, für die –ich ist 1, und-k 1 übersetzt nach vorne durch den inkreisradius des fünfeckigen Basis, während alle anderen Gesichter bekommen übersetzten Aussagen der inkreisradius eines dekagonale Basis. Also die Operationen, die wir hier brauchen sind und-und nand!

// gleiche wie vorher
–und: calc(var(–i)*var(–k));
–nand: calc(1 – var (- und));
–z: calc(var(–und -)*#{$ri5gon} + var(–nand)*#{$ri10gon});

transform: rotatey(var(–ay))
translate3d(0, var(–y, 0), var(–z, 0));

Finden Sie den Stift, indem Sie thebabydino (@thebabydino) auf CodePen.

Als Nächstes wollen wir alle .rev (für die-k 1) nach unten zeigen. Dies ist ziemlich einfach und erfordert keine logische operation, müssen wir nur noch eine halbe umdrehung rotation um die z-Achse zu transformieren-Kette, aber nur für die Flächen, für die –k 1:

// gleiche wie vorher
–az: calc(var(–k)*.5turn);

transform: rotatey(var(–ay))
translate3d(0, var(–y), var(–z))
drehen(var(–az));

Finden Sie den Stift, indem Sie thebabydino (@thebabydino) auf CodePen.

Die fünfeckigen Flächen (für die-p 1) sind dann alle gedreht um die x-Achse um einen bestimmten Winkel:

–ax: calc(var(–p)*#{$ax5});

Im Falle des dreieckigen Flächen (für die-p ist 0, was bedeutet, wir müssen, verwenden Sie –notp), wir haben einen bestimmten Drehwinkel für die Gesichter der antiprism ($ax3-Mitte), in einem anderen Winkel für die Gesichter der Rotunde, die nach oben zeigen ($ax3-cup-dir) und noch ein anderer Winkel für die Rotunde Gesichter nach unten ($ax3-cup-rot).

Die antiprism Gesichter sind diejenigen, für die –ich ist 0, also müssen wir multiplizieren Ihren entsprechenden Wert für den Winkel mit –noti hier. Die Rotunde Gesichter sind diejenigen, für die –ich ist 1, und aus diesen, die diejenigen nach oben sind diejenigen, für die –k 0 ist, und diejenigen, die nach unten zeigen sind diejenigen, für die –k 1 ist.

–notk: calc(1 – var(–k));
–noti: calc(1 – var(–i));
–notp: calc(1 – var(–p));

–ax: calc(var(–notp)*(var(–noti)*#{$ax3-Mitte} +
var(–i)*(var(–notk)*#{$ax3-cup-dir} + var(–k)*#{$ax3-cup-rev})) +
var(–p)*#{$ax5});

transform: rotatey(var(–ay))
translate3d(0, var(–y), var(–z))
drehen(var(–az))
rotatex(var(–ax));

Dies gibt uns das Endergebnis!

Finden Sie den Stift, indem Sie thebabydino (@thebabydino) auf CodePen.

1 Für jedes reguläre polygon (wie die Gesichter unserer Formen), der Bogen entspricht einer Kante, sowie der Winkel zwischen der circumradii zu dieser Kante der enden (für unsere base-Winkel) eine voll-Kreis (360°) über die Anzahl der Kanten. Bei einem gleichseitigen Dreieck, der Winkel ist 360°/3 = 120°. Für ein regelmäßiges Fünfeck, das den Winkel 360°/5 = 72°. Für einen regelmäßigen decagon, der Winkel ist 360°/10 = 36°. ↪️

Finden Sie den Stift, indem Sie thebabydino (@thebabydino) auf CodePen.