css3 图片旋转 固定,CSS3 - 固定侧旋转(CSS3 - Rotation by fixed side)

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

...