标签: transform

使用CSS,我如何申请多个transform？

示例:在下文中,仅应用平移,而不是旋转.

li:nth-child(2) {
    transform: rotate(15deg);
    transform: translate(-20px,0px);        
}

我一直在使用CSS3转换在我的网站中旋转带边框的图像和文本框.

问题是Chrome中的边框看起来很混乱,就像没有抗锯齿的(低分辨率)游戏一样.在IE,Opera和FF中它看起来好多了,因为使用了AA(它仍然清晰可见,但并不坏).我无法测试Safari,因为我没有Mac.

旋转的照片和文字本身看起来很好,只是看起来像锯齿状的边框.

我使用的CSS是这样的:

.rotate2deg {
    transform: rotate(2deg);
    -ms-transform: rotate(2deg); /* IE 9 */
    -webkit-transform: rotate(2deg); /* Safari and Chrome */
    -o-transform: rotate(2deg); /* Opera */
    -moz-transform: rotate(2deg); /* Firefox */
}

有什么方法可以解决这个问题,例如强迫Chrome使用AA吗？

示例如下:

我一直在努力解决这个问题,似乎无法在任何地方找到答案(有效).我有一个SVG文件,如下所示:

<svg

   xmlns:dc="http://purl.org/dc/elements/1.1/"
   ...
   width="72.9375"
   height="58.21875"
   ...>
   ...
   <g
     ...
     transform="translate(10.75,-308.96875)"
     style="...">
     <path
       inkscape:connector-curvature="0"
       d="m -10.254587,345.43597 c 0,-1.41732 0.17692,-2.85384 0.5312502,-3.5625 0.70866,-1.41733 2.14518,-2.82259 3.5625,-3.53125 1.41733,-0.70866 2.11392,-0.70867 3.53125,0 1.41732,0.70866 ... z"
       ... />
  </g>
</svg>

我想删除该transform="..."行,但仍然将我的图像保留在我放置的位置(在InkScape中).如果我手动删除变换,图像会拉到屏幕的另一部分(正如预期的那样),但我需要完全摆脱变换,同时让图像保持在我想要的位置.有没有办法将变换移除/压平到路径坐标本身？(我必须处理的唯一变换是平移和缩放,没有矩阵.)

我试图通过使用PNG和CSS3动画复制Apple风格活动指示器(日食加载图标).我让图像旋转并连续进行,但在动画完成下一次旋转之前似乎有一段延迟.

@-webkit-keyframes rotate {
  from {
    -webkit-transform: rotate(0deg);
  }
  to { 
    -webkit-transform: rotate(360deg);
  }
}
#loading img
{
    -webkit-animation-name:             rotate; 
    -webkit-animation-duration:         0.5s; 
    -webkit-animation-iteration-count:  infinite;
    -webkit-transition-timing-function: linear;
    }

我已经尝试过改变动画的持续时间,但没有区别,如果你慢下来说5s它更明显的是在第一次旋转之后有一个停顿再次旋转.这是我想要摆脱的暂停.

非常感谢任何帮助,谢谢.

我正在使用Java的内置XML转换器来获取DOM文档并打印出生成的XML.问题是尽管明确地设置了参数"indent",但它根本没有缩进文本.

示例代码

public class TestXML {

 public static void main(String args[]) throws Exception {
  ByteArrayOutputStream s;

  Document d = DocumentBuilderFactory.newInstance().newDocumentBuilder().newDocument();
  Transformer t = TransformerFactory.newInstance().newTransformer();

  Element a,b;

  a = d.createElement("a");
  b = d.createElement("b");

  a.appendChild(b);

  d.appendChild(a);

  t.setParameter(OutputKeys.INDENT, "yes");

  s = new ByteArrayOutputStream();

  t.transform(new DOMSource(d),new StreamResult(s));

  System.out.println(new String(s.toByteArray()));

 }
}

结果

<?xml version="1.0" encoding="UTF-8" standalone="no"?><a><b/></a>

期望的结果

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<a>
 <b/>
</a>

思考？

似乎Google Chrome最近有一次更新,导致文本模糊后出现问题transform: scale().具体来说,我这样做:

@-webkit-keyframes bounceIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(.3);
  }

  50% {
    opacity: 1;
    -webkit-transform: scale(1.05);
  }

  70% {
    -webkit-transform: scale(.9);
  }

  100% {
    -webkit-transform: scale(1);
  }
}

如果您在Chrome中访问http://rourkery.com,则应在主文本区域看到问题.它不习惯这样做,它似乎没有影响其他webkit浏览器(如Safari).还有其他一些关于人们遇到类似3d变换问题的帖子,但是找不到像这样的2d变换.

任何想法将不胜感激,谢谢!

我正在寻找一个允许我在多个用户之间实时同步文本的库(ala Google Docs).

我偶然发现了运营转型,这似乎符合我的需求.话虽如此,我理解OT的要点,但不理解OT的数学和实现.

因此,我想知道是否有一个拖放到文本区域的拖放Javascript库,生成转换,然后允许我将这些转换应用到另一个客户端？

(我已经获得了Etherpad源代码,但我无法做出正面或反面.如果有人能指出如何利用Etherpad的OT实现,那也会很棒!)

我有两个绝对定位的div元素重叠.两者都通过css设置了z-index值.我使用translate3dwebkit变换在屏幕上为这些元素设置动画,然后再返回到屏幕上.变换后,元素不再遵循其设定z-index值.

任何人都可以解释一旦我对它们进行webkit转换后,div元素的z-index/stack-order会发生什么？并解释我可以做些什么来保持div元素的堆栈顺序？

以下是有关我如何进行转换的更多信息.

在转换之前,每个元素都通过css获取这两个webkit转换值(我使用jQuery来执行.css()函数调用:

element.css({ '-webkit-transition-duration': duration + 's' });
element.css({ '-webkit-transition-property': '-webkit-transform' });

然后使用translate3d -webkit-transform对元素进行动画处理:

element.css({ '-webkit-transform': 'translate3d(' + hwDelta + 'px, 0, -1px)' });

顺便说一句,我已经尝试将第三个参数设置translate3d为几个不同的值,以尝试在3d空间中复制堆栈顺序,但没有运气.

此外,iPhone/iPad和Android浏览器是我的目标浏览器,此代码需要运行.两者都支持webkit转换.

我在我的解决方案中添加了一个现有的ASP.Net Web应用程序项目.除了标准的调试和发布配置,该解决方案还有两个自定义配置,SAT和UAT.对于新的Web应用程序,右键单击Web.Config显示上下文菜单,但"添加配置转换"选项显示为灰色.

我不知所措.新项目是一个Web应用程序.Configuration Manager不显示此项目的两个自定义配置,但它适用于其他项目.项目似乎在解决方案文件中具有正确的条目.

思考？

我如何用jQuery旋转元素.animate()？我正在使用下面的行,它正在正确地设置不透明度,但这是否支持CSS3转换？

$(element).animate({
   opacity: 0.25,
   MozTransform: 'rotate(-' + -amount + 'deg)',
   transform: 'rotate(' + -amount + 'deg)'
});