[英]CSS transform-origin not working as expected
我正在尝试在CSS中创建一个翻转效果,但正在工作,但我希望div向下翻转,以便动画的中心点位于底部边缘。
我认为transform-origin: 0 100%;
会为我创造理想的效果,但这并不完全正确。 我创建了显示问题的JSFiddle 。 注意红色div的底边在翻转之前如何抬起。 有谁知道如何纠正这个问题?
这也是我的HTML和CSS供参考
#f1_container {
position: relative;
width: 200px;
height: 100px;
z-index: 1;
}
#f1_container {
perspective: 1000;
}
.thing {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #ffffff;
}
#f1_card {
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: all 1.0s linear;
}
#f1_container:hover #f1_card {
transform: rotateX(180deg);
transform-origin: 0 100%;
}
.face {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
background-color: red;
}
.face.back {
display: block;
transform: rotateX(180deg);
box-sizing: border-box;
padding: 10px;
color: white;
text-align: center;
background-color: #aaa;
}
<div id="f1_container">
<div class="thing">
<p>This is some text</p>
</div>
<div id="f1_card">
<div class="front face">
</div>
<div class="back face center">
<p>This is nice for exposing more information about an image.</p>
</div>
</div>
</div>
将transform-origin
属性移至#f1_card
选择器。
#f1_card {
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: all 1.0s linear;
transform-origin: 0 100%;
}
https://jsfiddle.net/325d8m57/1/
在您的代码中,您仅更改了悬停时的转换原点。 因此它从50% 50%
(默认值)过渡到0% 100%
因为您在transition
属性中使用了all
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.