0
A
回答
2
在這一刻,只有Chrome支持變換風格:保持-3D在像素級別 - 而不是在元素級別。由於它是在像素級完成的,因此元素的某些部分可以在另一個元素的前面呈現,而在某些元素的後面。
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>
所以,就目前而言,你將被限制使用的招數 - 基本渲染元素作爲2個不同的元素
1
您可以通過着色形狀的intersecions實現這一目標。這裏的關鍵是使用主形狀overflow: hidden;
與position: relative;
這裏設置交叉部分是一個片段:
.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>
相關問題
- 1. 從{a-b,b-c,c-a}改變爲{(a,b),(b,c),(c,a)}?
- 2. 邏輯:是(A &&!(B || C))|| (B || C)與(A || B || C)相同?
- 3. PHP變換陣列'a','b','c'到'a/b/c','a/b','a'
- 4. Javascript不是(a == b)||不(c == b)
- 5. 如何寫A :: B :: C => D給定A :: B :: C和(A,B,C)=> D?
- 6. C#數組[a,b,c]與數組[a] [b] [c]?
- 7. 我想從['a','b','c']將python列表變成['a','a','b',b','c','c']
- 8. 字符串比較像a,b,c與c,b,a
- 9. jquery - (如果css = A)做B
- 10. Javascript a = b = c陳述
- 11. 「a,b,c」.split(「,」)優於[「a」,「b」,「c」]的優點是什麼?
- 12. SQL條件:(A = B AND C LIKE%D%)或(A LIKE%B%和C = D)
- 13. GROUP BY(A,B)和(B,A)
- 14. a + = b和a = + b之間的區別是什麼,a ++和++ a?
- 15. SqlAlchemy如何查詢列A == a和B == b和A == b和B == a
- 16. a,b = b,a + b和a = b,b = a + b在fibonacci中的區別是什麼[Python]
- 17. {a,b,c,d,e} a,b-> c,a,b-> d和d-> e的最高範式是什麼?
- 18. 測試非整數是否在範圍[a,b) - 或[a,b],(a,b),(a,b)
- 19. PHP String concatenation - 「$ a $ b」vs $ a。 「」。 $ b - 性能
- 20. 如何讓mod rewriteconds做'(A和B)或(C和D)'而不是'A和(B或C)和D'?
- 21. 合併路徑與Python,從/ A/B/C + C/d到/ A/B/C/d
- 22. a =「hello」,b =「bye」,c = a * b然後打印c?
- 23. 從擠壓元組(A,(B,C))至(A,B,C)中fsharp
- 24. 什麼是A&B代表.Aggregate((a,b)=>聲明w/a&b)
- 25. 比賽[A](B)但不是![A](B)
- 26. A→B,B→A類協會
- 27. 'A','B'和'A或B'的T-SQL COUNT
- 28. 區別 「A級; B類」 和 「類A :: B」
- 29. a = b || c在Python中
- 30. C++:a-power b模數k
沒有之一,你必須拆分的至少一個這些分爲兩個部分/層,其中一個層位於堆棧下方,另一個(半個)位於堆棧下方。像A在底部,然後是B,然後是C,然後是A的副本,這部分被掩蓋,只覆蓋堆棧頂部的區域。 – Thomas
哈哈,你應該讓你的問題更有建設性。那可能嗎? ..... yes yes –
但是,根據圖層的具體內容*(僅限於顏色或背景圖像)*,您可以使用CSS和僞元素(':after')創建此遮罩副本。 – Thomas