[英]Why is css3 translate not working here?
试图制作一个css3多维数据集,我从此开始。
<div class="box">
<div class="left"></div>
<div class="front"></div>
<div class="right"></div>
<div class="back"></div>
</div>
CSS:
.box {
position: relative;
top: 300px;
left: 300px;
width: 300px;
height: 300px;
}
.left {
position: absolute;
top: 0;
left: 0;
background: #ff4d4d;
height: 300px;
width: 300px;
transform: translate(-300px, 0px) rotateY(80deg);
-webkit-transform: translate(-300px, 0px) rotateY(80deg);
-moz-transform: translate(-300px, 0px) rotateY(80deg);
-o-transform: translate(-300px, 0px) rotateY(80deg);
z-index: 1;
}
.front {
background: #ff6b6b;
height: 300px;
width: 300px;
position: absolute;
top: 0;
left: 0;
}
我在这里http://jsfiddle.net/E9Q7w/做了一个小提琴。这里发生的是旋转正在应用,而平移确实将盒子推向X轴。 但是旋转轴/中心没有被推动。 它仍然在盒子中间。 像笔译未做应做的事,对不对? 这是为什么? 我想念什么?
您使用了错误的值。 rotateX
和rotateY
不存在。 如果要选择旋转位置,请使用transform-origin:
, transform-origin-(x/y/z)
transform: translate(-300px, 0px) rotate(80deg);
-webkit-transform: translate(-300px, 0px) rotate(80deg);
-moz-transform: translate(-300px, 0px) rotate(80deg);
-o-transform: translate(-300px, 0px) rotate(80deg);
这是有关transform-origin
一些文档-https: //developer.mozilla.org/zh-CN/docs/Web/CSS/transform-origin
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.