0
Ist es möglich, A auf B, B auf C, C auf A mit CSS HTML und JavaScript zu tun?Ist es möglich, A auf B, B auf C, C auf A mit CSS HTML und JavaScript zu tun?
wie folgt aus:
A
Antwort
2
In diesem Moment unterstützen nur Chrome verwandeln-style: preserve-3d auf der Pixelebene - statt auf der Elementebene. Da es auf der Pixelebene gemacht wird, können einige Teile des Elements vor einem anderen Element und einige im Hintergrund gerendert werden.
body {
transform-style: preserve-3d;
}
div {
width: 200px;
height: 100px;
line-height: 100px;
text-align: center;
position: absolute;
transform-style: preserve-3d;
}
.A {
background-color: tomato;
left: 50px;
top: 0px;
transform: rotateY(3deg); /* this does the trick */
}
.B {
background-color: lightgreen;
left: 50px;
top: 0px;
transform: rotate(120deg);
transform-origin: center bottom;
}
.C {
background-color: lightblue;
left: 50px;
top: 0px;
transform: rotate(-120deg);
transform-origin: center bottom;
}<div class="A">Some fancy text</div>
<div class="B">Some fancy text</div>
<div class="C">Some fancy text</div>Also, für den Moment, werden Sie beschränkt Tricks verwenden - im Grunde Rendering eines der Elemente als 2 verschiedene Elemente
1
du durch Einfärben intersecions von Formen achive können. Der Schlüssel hier ist overflow: hidden; in Haupt-Formen zu verwenden und mit position: relative; schneidendem Teil gesetzt Hier ist ein Ausschnitt:
.box1 {
width: 200px;
height: 200px;
background: red;
position: relative;
top: 40px;
}
.box2 {
width: 250px;
height: 250px;
background: navy;
border-radius: 0%;
position: absolute;
left: 75px;
top: 50px;
overflow: hidden;
}
.box3 {
width: 200px;
height: 200px;
background: black;
position: absolute;
left: 50px;
top: 150px;
overflow: hidden;
}
#top-left {
width: 150px;
height: 150px;
background: red;
position: relative;
left: -25px;
}
#top_right {
width: 150px;
height: 150px;
background: navy;
position: relative;
left: 50px;
}<div class="box1">
<div class="box2">
<div id="top-left"></div>
</div>
<div class="box3">
<div id="top_right"></div>
</div>
</div>Verwandte Themen
- 1. (a, b), wobei a von A und B aus B und a + b <= c
- 2. PHP transformieren Array 'a', 'b', 'c' zu 'a/b/c', 'a/b', 'a'
- 3. Der einfachste Weg, um "a/b/c" in ["a/b/c", "a/b", "a"] zu konvertieren
- 4. Wie konvertiert man A [B [C]] in B [A [C]] wenn A und B Monaden sind?
- 5. explodieren a: b auf eine: c php
- 6. Vereinfachen (a + b) XOR (c + b)
- 7. Assoziativität Mathe: (a + b) + c = a + (b + c)
- 8. javascript: a = b. Ist es möglich, a zu ändern, aber nicht zu beeinflussen b?
- 9. Eingang (a + b) ** 2, Ausgang a * a + a * b + b * a + b * b
- 10. Fließkomma C++ - Compileroptionen | a/b verhindern -> a * (1/b)
- 11. GROUP BY (a, b) und (b, a)
- 12. Kann nicht demonstrieren, warum! A & B ODER! A & C ODER! C & B =! C & B ODER! A & C
- 13. Was ist der Unterschied zwischen a, b = b, a + b und a = b, b = a + b in Fibonacci [Python]
- 14. SSH von A nach C über B-Box mit A-Taste ohne Speichern auf B-Maschine
- 15. Was ist der Unterschied zwischen '(a b c) und (Liste' a 'b' c)?
- 16. Grafana/graphite - maxSeries auf #A und #B
- 17. In C++, ist A + = B besser als A = A + B in der gleichen Weise ++ A ist zu A ++?
- 18. Python erstellen Liste C = A + B, so dass Änderungen an C beeinflussen A und B
- 19. Warum a [c] a [b] überschreiben?
- 20. Ist ein Index für A, B redundant, wenn es einen Index für A, B, C gibt?
- 21. Wie Links Link Join A nach B auf X, dann verbinden B zu C auf Y
- 22. Unterschied zwischen a - = b und a = a - b in Python
- 23. c = a + b und implizite Konvertierung
- 24. Wie kann ich [: b (lvar)] aus [[: a: A] [: b: B] [: c: C]] in Clojure core.logic entfernen?
- 25. PHP flaches Array zu geschachtelt ["a", "b", "c"] zu ["a" => ["b" => ["c"]]]]
- 26. Wie tauscht [b] [b = a, 0] zwischen a und b?
- 27. Unterschied zwischen a + b und a .__ add __ (b)
- 28. Haskell: a -> a -> ... -> b [a] -> b
- 29. Warum behandelt Numpy a + = b und a = a + b anders?
- 30. Wählen Sie drei Spalten (A, B, C) und Zeilen zurück, wo (B, C) sind verschieden und A ist auf Maximalwert, da mehrere Vorkommen von (B, C) -Paaren
nein, Sie haben mindestens eine der aufzuspalten diese in zwei Teile/Schicht, wobei eine Schicht unterhalb des Stapels und die andere (die Hälfte) oben ist. Wie A am unteren Rand, dann B, dann C und dann eine Kopie von A, die teilweise maskiert ist, um nur den Bereich oben auf dem Stapel abzudecken. – Thomas
Lol, du solltest deine Fragen konstruktiver machen. Ist das möglich? ..... ja in der Tat –
Aber je nach dem konkreten Inhalt Ihrer Ebene * (nur Farbe oder Hintergrundbild) *, können Sie diese maskierte Kopie mit CSS und einem Pseudo-Element erstellen (': after') – Thomas