Sim*_*old 5 3d rotation css3 css-transforms
我可以transform: rotateY用div来对抗transform: rotateY他的父母吗？
例如:
如果我有一个父div rotateY(-45deg),他所有的孩子将是-45deg.
为什么我不能添加rotateY(45deg)给孩子让它看起来像没有轮换影响呢？
演示:http://jsfiddle.net/eBT4A/
您可以将rotateY(45deg)添加到父级div具有rotateY(-45deg)的子级中，以使其看起来只有当您为这两个旋转设置相同的枢轴点时才没有旋转影响它，
在您的演示示例中，您没有应用相同的枢轴点，
尝试这个...
<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>