Tôi có thể transform: rotateY một div để chống lại số transform: rotateY của cha/mẹ của mình không?
Ví dụ:
nếu tôi có div cha với rotateY(-45deg), tất cả con của trẻ sẽ là -45deg.
Tại sao tôi không thể thêm rotateY(45deg) cho trẻ em để làm cho nó trông giống như không có vòng quay ảnh hưởng đến nó?
Demo: http://jsfiddle.net/eBT4A/Chuyển đổi CSS3: xoay vòng một div để đối chiếu rotationY của phụ huynh
Bạn có thể thêm rotateY (45deg) cho trẻ em ở đâu mẹ div có rotateY (-45deg), để làm cho nó trông giống như không xoay ảnh hưởng nó chỉ khi bạn thiết cùng điểm pivot những hai quay,
trong ví dụ giới thiệu của bạn, bạn đã không áp dụng cùng một thời điểm quan trọng,
Hãy thử này ...
<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>
Bạn cần phải thêm bảo tồn-3d cho phụ huynh:
body {
-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);
}
Theo như tôi biết, điều đó sẽ không làm việc trong IE.