RotateY'ye ters çevirmek için bir div döndürme transform: rotateY
ebeveyni transform: rotateY
ebeveyine sayabilir mi?
Örneğin rotateY(-45deg)
numaralı bir ebeveyn div'um varsa
, tüm çocukları -45deg olacaktır.
Çocuklara, döndürme işleminden etkilenmeyecek şekilde görünmesini sağlamak için neden rotateY(45deg)
ekleyemiyorum?
Demo: http://jsfiddle.net/eBT4A/CSS3 dönüşümü: ebeveyni
5
A
cevap
0
Hiçbir döndürülmesi etkilenen gibi bu sorulara aynı eksen noktasını set yalnızca görünmesi için, üst div rotateY (-45deg) sahip çocuklara rotateY (45deg) ekleyebilir iki rotasyon, aynı pivot noktasını uygulamak değil demo örnekte
,
bu deneyin ...
<html>
<head>
<style type="text/css">
body {
-webkit-perspective: 500;
}
#content {
position:absolute;
top: 0px;
left: 0px;
width: 300px;
height: 500px;
background: #000;
-webkit-transform-origin: 0px 0px;
-webkit-transform: rotate(45deg);
-moz-transform-origin: 0px 0px;
-moz-transform: rotate(45deg);
}
#element {
position:absolute;
top: 0px;
left: 0px;
width: 50px;
height: 50px;
background: #f00;
-webkit-transform-origin: 0px 0px;
-webkit-transform: rotate(-45deg);
-moz-transform-origin: 0px 0px;
-moz-transform: rotate(-45deg);
}
</style>
</head>
<body>
<div id="content">
<div id="element"></div>
</div>
</body>
</html>
0
Sen ebeveyne korumak-3d eklemeniz gerekir:
olarak bildiğim kadarıylabody {
-webkit-perspective: 500;
}
#content {
position:fixed;
top: 20px;
left: 0;
width: 300px;
height: 500px;
background: #000;
-webkit-transform-origin: 0 0;
-webkit-transform: rotateY(45deg);
-webkit-transform-style: preserve-3d;
}
#element {
position:fixed;
top: 20px;
left: 50%;
width: 50px;
height: 50px;
background: #f00;
-webkit-transform-origin: 0 0;
-webkit-transform: rotateY(-45deg);
}
, IE çalışmaz.
İlgili konular
- 1. Çocuklar, CSS3 dönüşümü
- 2. css3 animasyon/geçiş/dönüşümü: Görüntü nasıl büyür?
- 3. CSS3 dönüşümü ile ölçeklendirilmiş bir HTML öğesinin yüksekliğini nasıl ölçersiniz?
- 4. CSS3 dönüşümü: translateX eşdeğer Ben bunu yapmak istiyorum sağ
- 5. CSS3 stilini GWT 2.5
- 6. Yalnızca event.target ile ebeveyni hedefle?
- 7. CSS3
- 8. CSS3
- 9. JQuery ile olay hedefinin ebeveyni nasıl alınır?
- 10. Bir widget'ın ebeveyni python tkinter'de değiştirebilir misiniz?
- 11. Chrome'da Jerky CSS dönüşümü
- 12. Geçiş, CSS3
- 13. CSS3 türü?
- 14. Css3 dönüşümü animasyonu dinamik olarak oluşturulmuş bir öğe için IE 11'de çalışmıyor
- 15. Tarayıcı bazen bir CSS3 dönüşümü sırasında bir jQuery tıklama olayını yoksayar.
- 16. -ms-dönüşümü
- 17. CSS3 ölçeği uygulandığında sortable yanlış davranıyor
- 18. CSS3 dönüştürmeyi bir yayında nasıl kullanabilirim?
- 19. Bir arka plan görüntüsünde CSS3 geçişi
- 20. CSS3 Animasyon Tekrarla
- 21. CSS3 Ay Tutulması şekli
- 22. css3 görünüm özelliği
- 23. CSS3 Ortam Sorguları çalışmıyor
- 24. CSS3 Degradeler, piksel yerine,
- 25. yüksekliği bu CSS3 geçiş
- 26. CSS3 Animasyon Çalışmıyor Firefox
- 27. CSS3 animasyon kenar boşlukları
- 28. CSS3 ile görüntüyü büyütme
- 29. CSS3 Animasyon IE8/9
- 30. CSS3 zarf şekli