CSS3 - 固定侧旋转(CSS3 - Rotation by fixed side)
看一个小提琴演示我的问题:
div:hover{
-webkit-transform: rotateX(90deg);
transform: rotateX(90deg);
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
}
div {
-webkit-transition-duration: 1s; /* Safari */
transition-duration: 1s;
}
我想翻转一个div,底线在整个机芯中完全固定。 我一直在谷歌上搜索,但找不到解决方案。 正如您在小提琴中看到的那样,当您将鼠标悬停在div上时,边框的底线会从底部的
线移开,然后向后旋转。 我希望旋转具有完全固定的底部边框,就像我翻转日历页面一样。 我已经尝试过transform-origin来修复旋转,但它显然无法正常工作。 有没有办法做到这一点只是CSS?
See a fiddle to demonstrate my issue:
div:hover{
-webkit-transform: rotateX(90deg);
transform: rotateX(90deg);
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
}
div {
-webkit-transition-duration: 1s; /* Safari */
transition-duration: 1s;
}
I would like to flip a div with the bottom line completely fixed throughout the movement. I've been googling around a lot, but couldn't find a solution. As you can see in the fiddle, when you hover your mouse over the div, the bottom line of the border moves away from the
line at the bottom, and gets rotated back afterwards. I would like to have the rotation with a completely fixed bottom border, like I'd flip a calendar page. I've tried transform-origin to fix the rotation, but it apparently isn't working. Is there a way to do this just CSS?
原文:https://stackoverflow.com/questions/24664412
更新时间:2020-08-08 15:08
最满意答案
如果你将变换原点放在你的DIV属性而不是你的DIV:hover它可以工作。
在代码中:
用这个:
div:hover{
-webkit-transform: rotateX(90deg);
transform: rotateX(90deg);
}
div {
-webkit-transition-duration: 1s; /* Safari */
transition-duration: 1s;
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
}
而不是这个:
div:hover{
-webkit-transform: rotateX(90deg);
transform: rotateX(90deg);
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
}
div {
-webkit-transition-duration: 1s; /* Safari */
transition-duration: 1s;
}
if you put your transform origin on your DIV properties instead of in your DIV:hover it works.
In code:
use this:
div:hover{
-webkit-transform: rotateX(90deg);
transform: rotateX(90deg);
}
div {
-webkit-transition-duration: 1s; /* Safari */
transition-duration: 1s;
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
}
instead of this:
div:hover{
-webkit-transform: rotateX(90deg);
transform: rotateX(90deg);
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
}
div {
-webkit-transition-duration: 1s; /* Safari */
transition-duration: 1s;
}
相关问答
这将在您的元素的左上角设置旋转枢轴点并旋转它: -webkit-transform: rotate(-25deg);
-webkit-transform-origin: 0% 0%;
浏览一下.nav_item_txt类 http://jsfiddle.net/KHkX7/ This will set the rotation pivot point on top-left corner of your element and rotate it: -webkit-transform: rota
...
标准CSS3旋转应该在IE9中工作,但我相信你需要给它一个供应商的前缀,像这样: -ms-transform: rotate(10deg);
它可能在beta版本可能不起作用; 如果没有,请尝试下载当前的预览版本(预览7),这是beta的更新版本。 我没有测试版测试,所以我无法确认是否在该版本。 最终版本肯定是支持它的。 我也可以确认在IE9中已删除了IE特定的filter属性。 [编辑] 人们要求提供进一步的文件。 正如他们所说,这是非常有限的,但我确实发现这个页面: http : //c
...
出现此问题的原因是您将鼠标悬停在动画元素上。 旋转发生时,鼠标悬停的元素会改变其大小。 结果:在短时间内光标不再处于悬停位置。 (自己看,为图标设置一个彩色边框并将其悬停)。 如果鼠标不能保持完全不动的话,这将随后重置事件... 为避免这种情况,请将图标设置在容器中,并在容器悬停时执行动画。 HTML / CSS .wrapper:hover .fa-stack{
color: red;
transition: 0.9s;
transform: rotateY(180
...
http://css3playground.com/flip-card.php 您正在寻找以下CSS3属性(右键单击其中一个闪存卡): -moz/webkit-transition(-style): ...;
-moz/webkit-transform: ...;
http://css3playground.com/flip-card.php You are looking for the following CSS3 properties (right-click on one of the
...
Android支持webkit转换使用 -webkit-transform: rotate(30deg);
Android support webkit transformation use -webkit-transform: rotate(30deg);
您只能在一个元素上一次应用一个转换规则。 如果你想旋转和缩放一个元素,我建议旋转父元素并缩放元素本身。 #homeMim {
position: absolute;
height: 200px;
-webkit-animation: spin 40s linear infinite;
-moz-animation: spin 40s linear infinite;
animation: spin 40s linear infinite;
...
假设您只是想将动画应用于转换,您可以使用CSS3转换,特别是transition-property (定义哪些属性将具有转换)和transition-duration (以指定从开始到完成转换的持续时间)。 还有一个transition-timing-function ,它允许您使用以下任何转换模式: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n) #box
{
width:200px;
height:2
...
这个转换正在完成你告诉它的内容。 它从359deg开始,并达到1deg。 你正在寻找'翻转'360deg回到1deg,这真的是361deg。 变换转换的工作方式是在值之间进行插值。 解决您的问题的方法是创建一个计数器变量,以保存旋转角度: var rot = 0; // lets start at zero, you can apply whatever later
要应用旋转,请更改值: rot = 359;
// note the extra brackets to ensure the
...
我遇到了jquery rotate,这是一个旋转解决方案,即使在不支持CSS3的IE8中也是如此 请参阅链接了解详情 http://code.google.com/p/jqueryrotate/wiki/Examples I come across jquery rotate which is a solution for rotation even in IE8 which doesn't support CSS3 Please refer link for details http://cod
...
如果你将变换原点放在你的DIV属性而不是你的DIV:hover它可以工作。 在代码中: 用这个: div:hover{
-webkit-transform: rotateX(90deg);
transform: rotateX(90deg);
}
div {
-webkit-transition-duration: 1s; /* Safari */
transition-duration: 1s;
-webkit-transform-origin: cen
...