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
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>
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.