标签: css-transforms

可能重复:
iphone webkit css动画导致闪烁

出于某种原因,在我的webkit-transform属性动画发生之前,有轻微的闪烁.这是我在做的事情:

CSS:

#element {
    -webkit-transition: -webkit-transform 500ms;
}

JavaScript的:

$("#element").css("-webkit-transform", "translateX(" + value + "px)");

在转换发生之前,有一个闪烁.知道为什么会这样,以及我如何解决问题？

谢谢!

更新:这只发生在Safari中.虽然动画确实有效,但在Chrome中却不会发生这种情况.

我有一种情况,在正常的CSS情况下,固定的div将准确定位在指定的位置(top:0px,left:0px).

如果我有一个具有translate3d变换的父级,这似乎不受尊重.我没有看到什么？我尝试过其他webkit-transform,如样式和变换原点选项,但没有运气.

我已经附加了一个JSFiddle,其中一个示例我希望黄色框位于页面的顶角而不是容器元素的内部.

您可以在下面找到小提琴的简化版本:

#outer {
    position:relative; 
    -webkit-transform:translate3d(0px, 20px , 0px); 
    height: 300px; 
    border: 1px solid #5511FF; 
    padding: 10px;
    background: rgba(100,180,250, .8); 
    width: 80%;
}
#middle{
    position:relative; 
    border: 1px dotted #445511; 
    height: 300px; 
    padding: 5px;
    background: rgba(250,10,255, .6);
}
#inner {
    position: fixed; 
    top: 0px;
    box-shadow: 3px 3px 3px #333; 
    height: 20px; 
    left: 0px;
    background: rgba(200,180,80, .8); 
    margin: 5px; 
    padding: 5px;
}

任何使translate3d与固定位置的孩子一起工作的指针将不胜感激.

假设我有几列,其中一些我想旋转以下值:

http://jsfiddle.net/MTyFP/1/

<div class="container">
    <div class="statusColumn"><span>Normal</span></div>
    <div class="statusColumn"><a>Normal</a></div>
    <div class="statusColumn"><b>Rotated</b></div>
    <div class="statusColumn"><abbr>Normal</abbr></div>
</div>

有了这个CSS:

.statusColumn b {
  writing-mode: tb-rl;
  white-space: nowrap;
  display: inline-block;
  overflow: visible;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}

最终看起来像这样:

是否可以编写任何会导致旋转元素影响其父级高度的CSS,这样文本就不会与其他元素重叠？像这样的东西:

我正在使用CSS转换来在CSS转换状态之间转换(基本上转换元素的比例).我注意到,当元素转换时,页面上的其余文本(在Webkit中)倾向于稍微改变其呈现,直到转换完成.

小提琴:http://jsfiddle.net/russelluresti/UeNFK/

我还注意到,我的标题上没有这种情况,标题上有-webkit-font-smoothing: antialiased属性/值对.所以,我想知道,有没有办法让文本保持默认外观(字体平滑的"自动"值),而不是在转换过程中改变渲染.

我已经尝试明确设置文本使用"自动"值,但这没有做任何事情.我还应该注意,将字体平滑设置为"无"也会阻止渲染在转换期间闪烁.

任何帮助表示赞赏.

编辑1

我应该注意到我使用的是OS X.在浏览Parallels的Chrome测试时,我没有看到两个不同的段落表现不同,所以这可能是Macs独有的问题.

如何以rotateX(50deg) rotateY(20deg) rotateZ(15deg)速记结合rotate3d()？

我在旋转和定位一行文字方面遇到了一些问题.现在它只是有效的位置.旋转也可以,但只有我禁用定位.

CSS:

#rotatedtext {
    transform-origin: left;
    transform: rotate(90deg);
    transform: translate(50%, 50%);
}

html只是纯文本.

tl; dr: 我想用CSS创建一个实际的3D球体 - 而不仅仅是一种幻觉

注意:某些代码段示例没有响应.请全屏使用.

使用纯CSS,您可以创建和动画 三维立方体,如下所示:

#cube-wrapper {
  position: absolute;
  left: 50%;
  top: 50%;
  perspective: 1500px;
}

.cube {
  position: relative;
  transform-style: preserve-3d;
  animation-name: rotate;
  animation-duration: 30s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes rotate {
  0% {
    transform: rotate3d(0, 0, 0, 0);
  }
  100% {
    transform: rotate3d(0, 1, 0, 360deg);
    ;
  }
}

.face {
  position: absolute;
  width: 200px;
  height: 200px;
  border: solid green 3px;
}

#front_face {
  transform: translateX(-100px) translateY(-100px) translateZ(100px);
  background: rgba(255, 0, 0, 0.5); …

类似于" css变换,铬合金锯齿状边缘 ",Firefox上的3D变换也是如此,例如:http://jsfiddle.net/78d8K/5/(< - 记住:Firefox)

这一次,backface-visibility没有帮助:(

任何的想法？

我们现在都知道,特别是从那篇好文章中我们应该更喜欢css-transforms来制作动画位置.

但是,我们得到了之间的选择translate()和translate3d()...

哪一个通常更快？

我想E在单词中反映字母,WEBLOG所以我使用了CSS转换属性,但是如果我将文本包装在一个span中,它就不起作用但是如果我在分配display: inline-block;或display: block;

所以变换不适用于内联元素？

示例1(无法转换)

<h1>W<span>E</span>BLOG</h1>

h1 span {
    transform:rotate(7deg);
    -ms-transform:rotate(7deg); /* IE 9 */
    -moz-transform:rotate(7deg); /* Firefox */
    -webkit-transform:rotate(7deg); /* Safari and Chrome */
    -o-transform:rotate(7deg); /* Opera */
}

示例2(Works,如果使用display: blockORdisplay: inline-block)