标签: css-transforms

我正在建立一个地图网站，如谷歌地图。将会有相互连接的图像块。将通过用鼠标拖动来探索地图，每次拖动后，将加载新图像。为了具有拖动浏览功能，我找到了两种方法：

1. 调用滚动函数滚动到地图中的正确位置
2. 在地图上应用 css-transform 平移，以便地图的右侧部分进入显示区域。

问题是，这些方法之间是否存在性能差异？（主要是在渲染速度和拖动平滑度方面）另外，还有其他标准来选择其中一种方法吗？

嘿家伙，我想你看了上面的图片就明白了我的想法。我无法在文本后面放置对角线，它应该被放置在其上的内容所掩盖。我想要它是纯CSS的。背景应该通过文本可见。

这与我之前问过的一个问题有关，但直到现在我才真正找到问题的根源。

我想要的是一个扩展到矩形的圆形。它的范围也从 0.9 到 1。

我所拥有的是这个http://codepen.io/StuffieStephie/full/zrZwEQ/我放慢了动画速度，因此“振动”更清晰。

    #seasonOne .test {
    padding:0;
        background-color: #fff;
    background: #fff url('http://i296.photobucket.com/albums/mm174/StuffieStephie/S1ChibiPreview2_zpsswyamase.png') 50% 50% no-repeat;
width: 200px;
height: 200px;
    border-radius: 50%;
    display: block;
        margin: 0 auto;
    -webkit-transition: 2s;
            -moz-transition: 2s;
            transition: 2s;
    -webkit-transform: scale(.9);
        -ms-transform: scale(.9);
        -moz-transform: scale(.9);
            transform: scale(.9);
    font-size: 0;
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
            transform-origin: 50% 50%;

}

#seasonOne:hover .test {
-webkit-transform: scale(1);
    -ms-transform: scale(1);
     -moz-transform: scale(1);
        transform: scale(1);
    width: 250px;
    height: 200px;

    border-radius: 0;
}

为什么它会这样晃动，而且只有在 Firefox …

在我的项目中，我使用 swiper.js 作为幻灯片，每张幻灯片都包含图像或带有 webvtt 字幕/副标题的 html5 视频。在调试时，我们注意到 webkit 浏览器上的字幕位置错误（太低，截断屏幕）。经过多次调试，发现父 div（swiper-wrapper）上的这个 css3 规则使 vtt 位置错误：

transform: translate3d(-1024px, 0px, 0px)

当您将视频放入第一张幻灯片时，一切都很顺利，因为还没有 css 翻译。

这似乎是一个核心 webkit 问题：在父级上使用 css 翻译时，默认 webvtt 定位会中断。

我发现的解决方法是将 vtt 本身中的行定位添加到每个字幕元素，如下所示：

WEBVTT

00:00:02.160 --> 00:00:06.440 line:90%
hello world

00:00:06.560 --> 00:00:11.920 line:90%
testing subtitles

任何没有“line: 90%”部分的句子都会部分渲染到屏幕外。看来这个设置强制 webvtt 解析器/渲染器将自身设置到正确的位置。

问题：有人遇到过这个问题吗？对于这个错误还有其他（更简单的）解决方法吗？将“line:”部分添加到所有字幕中将是一项艰巨的工作..除非有一个好的编辑器可以批量完成这些工作。

问题 2：由于这似乎是一个 webkit vtt 解析器错误，有人知道在哪里可以最好地报告这个问题吗？

此处测试设置： http: //orgonemedia.nl/webvtt-bug/

我有一个图像，它将在悬停时缩放。然而，同时图像在 X 轴和 Y 轴上都转换为 -50%，或者在某些情况下，仅在 X 轴上转换为 -50%。

有没有办法继承以前的转换，同时仍然更改其中一个值？

.container {
  position: relative;
  height: 400px;
  width: 640px;
  overflow: hidden;
}

img {
  -webkit-transform: translate(-50%,-50%) scale(1);
  transform: translate(-50%,-50%) scale(1);
  position: absolute;
  top: 50%;
  left: 50%;
  transition: 500ms;
}

img.special {
  -webkit-transform: translateX(-50%) scale(1);
  transform: translateX(-50%) scale(1);
  top: 0;
}

img:hover {
  -webkit-transform: translate(-50%, -50%) scale(1.1);
  transform: translate(-50%, -50%) scale(1.1);
}

<div class="container">
  <img src="http://www.lorempixel.com/640/400/nature" alt="test image" />
</div>
<div class="container">
  <img src="http://www.lorempixel.com/640/400/abstract" class="special" alt="test image" />
</div>

TL：博士； 有没有办法继承原始变换设置，同时仍然更改其中一个值？我不是 …

我读到一些 CSS 转换属性不会触发布局：

缩放、旋转、位置、不透明度

这可能是一个显而易见的问题，但这是否意味着它们将始终独立应用，而不管页面上的其他内容如何？

例如，当我使用translate(x,y)更改位置属性以向下移动一个框时，它不会推送下面的内容吗？我自己捣鼓了一下，看来改变位置完全脱离了dom流程。

我在悬停时使用 CSS 旋转一个对象，并希望当您取消悬停它时它保持在新位置。我已经四处搜索，但我唯一能找到的是css :hover 旋转元素并保持新的位置，这似乎超出了范围。

这种效果可以纯粹用CSS实现吗？我希望当你停止悬停时图标保持在 180 度位置。

我使用了这段代码：

i.fa.fa-globe:hover { 
    color: #e9204f;
    transition: 0.9s;
    transform: rotatey(180deg);
}

如果这有什么区别的话，它也是一个很棒的字体图标。

编辑 - 为其他需要它的人提供的简单 CSS 解决方案（摘自评论）：

.lovernehovermarket i.fa.fa-rocket { 
    transform: rotate(0deg);
    transition: transform 999s;
}

我在 Javascript 中使用滚动事件侦听器在滚动完成时手动定位元素。

myContainerElement.addEventListener('scroll', function (e) {
  const transform = 'translate3d(' + this.scrollLeft + 'px,0,0)';
  scrollMyElement(transform);
});

请注意，这scrollMyElement只是将变换添加到元素的样式中。这在 Firefox 和 Chrome 上效果很好，但我在 Safari 上遇到了问题。使用滚轮/触摸板或滚动条，滚动时元素似乎落后于页面的其余部分。

我能够通过以下解决方案解决鼠标滚轮/触摸板的这个问题：DOM元素位置滚动时缓慢+滚动条滚动和鼠标/触摸板滚动之间的差异

因此，在 Safari 中，现在使用鼠标滚轮/触摸板效果很好，但在使用滚动条时仍然滞后（就像上面发布的解决方案中的示例）。我怎样才能解决这个问题？！

我尝试过的事情：

1. -webkit-perspective: 1000; -webkit-backface-visibility: hidden;
2. -webkit-transform: translate3d(0,0,0)另外为了性能
3. 使用所有供应商前缀转换，例如 webkit、moz、o、ms。

我发现transform财产取决于perspective()职位

为什么会发生这种情况？还有其他规则/限制吗transform？

虽然我觉得很奇怪，但这似乎不是一个错误，因为我可以在 Chrome/FF 中重现它

box:nth-child(1):hover {
  transform: perspective(1000px) translate3d(0, 0, -100px);
}

box:nth-child(2):hover {
  transform: translate3d(0, 0, 100px) perspective(1000px);
}

box {
  padding: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: monospace;
  transition: transform .4s;
  background: rgba(255, 0, 0, 0.3);
  margin: 20px;
  font-size: 12px;
  perspective: 1000px;
  cursor: pointer;
}

box:nth-child(2) {
  background: rgba(0, 0, 255, 0.3);
}

<box>
  transform: perspective(1000px) translate3d(0,0,100px);
</box>
<box>
  transform: translate3d(0,0,100px) perspective(1000px);
</box>

我只是倾斜了用作横幅的部分。

现在，由于倾斜，该部分的高度明显高于预期。

如何根据这个新高度定义底部边距？

.banner{
    transform: skewY(-5deg);
    transform-origin: top right;
    outline: solid 1px black;
    margin-bottom: 5rem;
}

<section class="banner">
  <h1>Hello World!</h1>
  <h2>Subtitle</h2>
</section>
<div class="content">
  <p>CONTENT</p>
</div>

如果您以全屏方式打开代码片段并更改窗口大小，您就会知道我的意思...内容只是隐藏在横幅后面。

提前致谢！