DigitalOcean 为您旅程的每个阶段提供云产品。 立即开始使用 $200 免费积分!
transform-origin
属性与 CSS 变换一起使用,允许您更改变换的原点。
.element {
transform: rotate(360deg);
transform-origin: top left;
}
如上所述,transform-origin
属性最多可以采用两个以空格分隔的关键字或长度值用于 2D 变换,最多可以采用三个值用于 3D 变换。
在 200px x 200px 的方框上使用上面的代码,将变换应用于使用点击事件过渡的代码,将表现如下
默认情况下,变换的原点为“50% 50%”,即任何给定元素的中心。 将原点更改为“左上角”(如上面的演示中)会导致元素使用元素的左上角作为旋转点。
值可以是长度、百分比或关键字 top
、left
、right
、bottom
和 center
。
第一个值是水平位置,第二个值是垂直位置,第三个值表示 Z 轴上的位置。 第三个值仅在您使用 3D 变换时才有效,并且不能是百分比。
浏览器支持
IE | Edge | Firefox | Chrome | Safari | Opera |
---|---|---|---|---|---|
9+ | 全部 | 3.5+ | 全部 | 全部 | 11.5+ |
Android Chrome | Android Firefox | Android 浏览器 | iOS Safari | Opera Mobile |
---|---|---|---|---|
全部 | 全部 | 91+ | 全部 | 全部 |
Css-tricks.com 对网页设计师非常有用.. :)
我应该使用哪个 jQuery 库来实现这段代码?
没有,这是纯 CSS 代码。
最好使用 https://github.com/madrobby/vapor.js,它非常适合实现这些变换。
除非你说的是回退编码,否则 CSS 技巧就是 CSS 技巧,很少有地方会真正使用 JS 来实现实际效果。如果你参考 Codepen,你会发现 JS 最少,而且没有使用任何库。这会从一开始就破坏 CSS 解决方法。因此,除了 IE9(及更低版本)以外,供应商前缀应该在大多数情况下支持所有其他浏览器。
欢迎来到 CSS 技巧!
你好。我想知道这是否可以解决我遇到的一个问题。
我使用了 transform: scale(.5,.5); 但是我的边距的行为就像项目没有被缩放一样。当我调整浏览器大小的时候,左边的边距会导致项目远离边缘。当我检查元素并关闭变换时,我可以看到该项目对原始大小(变换之前)做出反应。
有没有办法使用 transform-origin 来纠正这个问题?我尝试了 transform-origin: 25%50%; 但是问题仍然存在,只是在不同的比例上。
我指的是此页面上的底部图片:stephendanison.com/mondrian
你最终找到这个问题的解决方案了吗?
因为这正是我遇到的问题…….
我遇到了同样的问题,并通过以下方法解决了它
– 首先,你需要将 DIV 翻转到左侧(旋转 -90)在其左下角。
– 然后你将其向右移动(left: Xpx)与原始高度的像素数量完全相同!
结果:原始左上角移动到原始左下角,因此缩放按预期工作。
以下是 HTML 代码
测试
以及 CSS 代码
.vertical {
height: 30px;
width: 60 px;
transform-origin: bottom left;
transform: rotate(-90deg);
left: 30px;
}
致敬,
GermanChris
你好!
请告诉我,我是否可以仅对旋转指定 transform-origin 并对其他属性禁用此效果。
你可以简单地使用标签属性 transform-origin: initial; 作为重置值。请参阅 Transform Origin 属性
你好,
这很好,但有人可以帮助我完成这项复杂的任务吗……
我想创建一个 div,使其右下角的边缘比右上角的边缘更长(即下边线比上边线更长)。如何实现这一点?
我一直在寻找这个整整一天。谢谢 Chris。
你使用
transform-origin: top left
而不是
transform-origin: left top
?是否有特殊原因?我认为第一个值指的是水平位置,而第二个值指的是垂直位置。或者,当使用 left、right、center、top 等关键字时,值的顺序是否无关紧要?