标签: transform

我正在寻求实现多用户操作转换,仅用于在网站上的服务器端进行基于纯文本的更改.

是否有可以推荐的非JavaScript实现？

如果我在画布上使用像translate/这样的转换函数rotate，那么所有点在传递给任何画布函数时都会被转换。这就像一个魅力，但是否还有一种方法可以在不实际绘制的情况下简单地获得转换点？

这在调试时非常有用。我现在所能做的就是查看该点的结束位置，但我似乎无法获得计算出的变换坐标。

那么，假设我旋转 90 度，是否有任何函数可以获取一个点（即(10, 0)）并将变换后的点返回（即(0, 10)）？

我的意思基本上是这样的：

ctx.rotate(90 * Math.PI / 180);
ctx.transformed(10, 0); // would return (0, 10) as an array or something

我有几个项目，我想计算它们可以适合的最小矩形，但项目旋转到一定程度，或倾斜或两者兼而有之。那么我如何获得可以包含所有矩形的最小矩形？

我如何创建诸如：
- 有一些文本
- 我点击它
- 它转换为包含我点击的文本的输入。

我查看了此处发布的不同答案，但没有任何效果对我有用...

内容：我有一个缩小到 0.6 的 div，调用时应该放大到 1（100%）。

问题：在 Firefox 中，#myDiv 正在按预期扩展，但在 Chrome 或 Safari（在 Mac 上）中没有任何反应。

我有这个 DIV 代码：

#myDiv {
-moz-animation: changeSize 1s ease-out .5s  forwards; /* Fx 5+ */
-webkit-animation: changeSize 1s ease-out .5s 0 forwards; /* Safari 4+ */
-o-animation: changeSize 1s ease-out .5s  forwards;  /* Opera */ 

-webkit-transform: scale(0.6);/* Saf3.1+, Chrome */
-moz-transform: scale(0.6); /* FF3.5+ */
-ms-transform: scale(0.6); /* IE9 */
-o-transform: scale(0.6); /* Opera 10.5+ */
transform: scale(0.6);

display: inline-block;
opacity:100;
background-image: url(img.png);
width: 154px; …

我可以将转换用作转换属性的值吗？

transition-property: transform;

W3C 转换标准没有将转换列为 Animatable 值。

事实上，W3C 转换标准在 7 的表中缺少 Animatable:Yes/No 的行。'transform' 属性。

我担心这是否合法。

这个stackoverflow answer建议使用transform作为transition-property的值。

我可以使用 0% 和 100% 关键帧获得变换动画，但如果只涉及 2 个状态，我更喜欢过渡而不是动画。

我已经建立了一个演示，它有 5 个浮动的<div>s 和不同长度的旋转文本。我想知道是否有一种方法可以让 CSS 类处理所有文本的居中，而不管长度如何。目前，我必须为样式表中的每个字符长度创建一个类。这可能会变得太混乱。我还注意到，如果我增加或减少包装的尺寸，偏移量就会被搞砸<div>。

我将通过 jQuery 将这些类添加到 div，但我仍然必须设置每个类以实现跨浏览器兼容性。

.transform3 {
    -webkit-transform-origin: 65% 100%;
    -moz-transform-origin: 65% 100%;
    -ms-transform-origin: 65% 100%;
    -o-transform-origin: 65% 100%;
    transform-origin: 65% 100%;    
}
.transform4 {
    -webkit-transform-origin: 70% 110%;
    -moz-transform-origin: 70% 110%;
    -ms-transform-origin: 70% 110%;
    -o-transform-origin: 70% 110%;
    transform-origin: 70% 110%;
}
.transform5 {
    -webkit-transform-origin: 80% 120%;
    -moz-transform-origin: 80% 120%;
    -ms-transform-origin: 80% 120%;
    -o-transform-origin: 80% 120%;
    transform-origin: 80% 120%;
}
.transform6 {
    -webkit-transform-origin: 85% 136%;
    -moz-transform-origin: 85% 136%;
    -ms-transform-origin: 85% …

使用“ zoom”属性转换元素后，获取元素的坐标时遇到麻烦。我需要知道所有4个角的坐标。我通常使用getBoundingClientRect属性来完成此操作，但是在缩放元素时似乎无法正常工作。我附加了一个简短的jsfiddle链接，以显示似乎无效的内容。我正在使用Chrome，但Firefox上也存在该行为。

http://jsfiddle.net/GCam11489/0hu7kvqt/

HTML：

<div id="box" style="zoom:100%">Hello</div><div></div><div></div>

JS：

var div = document.getElementsByTagName("div");
div[1].innerHTML = "PreZoom Width: " + div[0].getBoundingClientRect().width;
div[0].style.zoom = "150%";
div[2].innerHTML = "PostZoom Width: " + div[0].getBoundingClientRect().width;

当我运行该代码时，缩放前后的宽度都显示为“ 100”。

我发现了很多信息，但是我发现的所有内容似乎都说这是Chrome上的已知错误，并已得到修复。有谁知道如何纠正或我可能做错了什么？

我想使用一个 transform: scale 我的宽度变成 80vw 并且我的高度是自动的。所以这就是我想要的 = transform: scale(80vw, auto);。不幸的是，这不起作用。有没有另一种方法可以获得这种效果。最好不使用javascript。

我用以下演示重现了这个问题：http : //jsfiddle.net/baoqger/deL0yuvg/9/

在我的项目中，我有一个自定义图标标记，我想在某些情况下旋转图标。

我在创建图标时添加了一个 claasname：

const uturnIcon = L.icon({
  iconUrl: 'http://joshuafrazier.info/images/firefox.svg',
  iconSize: [30, 30],
  className: 'u-turn-icon'
})

并为该类添加 css 样式，如下所示：

.u-turn-icon {
  transform: rotate(20deg) !important
}

问题是默认情况下，图标img有一个style属性transform: translate3d，所以默认的transform和我添加的transform样式有冲突。并且默认的变换样式是由传单本身创建的，当我们缩放地图时，该属性的值也会更新。

那么如何解决这个问题呢？