标签: webkit-transform

我正在使用-webkit-transform: rotate()Chrome 14.0.835.2 dev-m 旋转一个元素,它正在为元素内部的文本做一些非常奇怪的事情.这让我想起了当您使用"平滑"抗锯齿而不是"清晰"旋转文本时,您在Photoshop中获得的类似效果.

谁知道这里发生了什么？它是针对此webkit或Chrome版本的,还是我可以做些什么来修复它？(它也不是列表元素之间边界的抗锯齿)

这是CSS:

div.right-column.post-it
{
  position: relative;
  width: 240px;
  background-color: #fe9;
  padding: 20px;
  -webkit-transform: rotate(.7deg);
  background: #fe9 -webkit-gradient(radial, 20% 10%, 0, 50% 10%, 500, from(rgba(255,250,220,1)), to(rgba(255,238,253,0)));
  box-shadow: 1px 1px 0 #ddccaa, 
            2px 2px 0 #dbcaa8,
            3px 3px 0 #d9c8a6,
            4px 4px 0 #d7c6a4,
            5px 5px 0 #d5c4a2,
            6px 6px 1px #d3c2a0,
            4px 4px 2px rgba(90,70,50,.5),
            8px 8px 3px rgba(90,70,50,.3),
            12px 12px 5px rgba(90,70,50,.1);
}

我有兴趣缩小100%宽度的div.我遇到的问题是,当我缩小元素时,它会获得固定的宽度,不再延伸100%的宽度.

示例 - http://jsfiddle.net/Fz7qh/2/

当我使用CSS缩放属性(而不是变换:缩放)时,它按预期工作,但我听说缩放属性不受支持.我的问题是用CSS变换量表可以实现吗？

我使用wkhtmltopdf(使用Webkit呈现引擎)将HTML文件转换为PDF文档.生成的PDF是A4.换句话说,它们具有固定的尺寸,因此具有有限的宽度.

我的PDF中的一个表包含图像,这些图像以类似拼图的方式错综复杂地拼凑在一起,有时会占用大量空间.

为了使得到的拼图适应A4 PDF的约束,我正在应用CSS属性-webkit-transform:scale(...);

这可以很好地扩展拼图,它仍然清晰易读,但由于某种原因,它也将包含拼图的桌子推向右边.尽管我明确地将其左边距设置为0,但似乎在拼图表的左侧增加了一个显着的边距.

有趣的是,我的webkit转换规模越小,左边的边距就越大.因此,例如,如果我使用比例(0.75),则得到的左边距约为200像素.如果我使用比例(0.5),则产生的左边距约为400像素.

我尝试使用左侧的绝对,固定和相对定位将拼图表左对齐:0.我还尝试将其浮动到左侧,并将其粘贴在文本对齐设置为左侧的容器中.这些技术都不起作用.

这个留下余量的想法是什么以及如何删除它/解决它？

我有一个非常复杂的网站建立在CSS3上,它具有三维变换,旋转,翻转,翻转和一般扭曲的html元素.

我试图找出其中一个元素的屏幕位置,并没有看到任何方法这样做.我想知道是否有人有任何巧妙的想法.

或者,如果任何人都可以解释数学背后-webkit-perspective,我可以找出位置,因为这是我唯一不确定如何建模.

我想检索我已应用CSS3转换的div的大小.

-webkit-transform: scale3d(0.3, 0.3, 1);

所以,实际上我已经将元素的原始尺寸缩小了30%.但是,当我查询元素的宽度/高度时,它会在应用变换之前报告元素的大小.

我知道这实际上是正确的行为,并且该元素实际上并没有改变大小,但其内容确实如此.但是,我在这里问的原因是,如果我右键单击元素并从弹出菜单中选择"inspect element"(我刚才在Mac上使用Safari),元素会突出显示渲染的大小显示在附加到元素的浏览器工具提示中.

所以,这表明浏览器"知道"渲染的大小,但我还没有找到一种方法来访问这些信息.谁能帮我？

是否有任何jQuery解决方案,以找到确切的显示高度 -webkit-transform: scale(0.7851);

该scale值可能会有所不同,这就是为什么在寻找妥善的解决办法

测试这些选项遗憾的是还没有找到解决方案:(

height()
innerHeight()
outerHeight()
outerHeight(true)

我认为这个问题只能解决一个数学基础;)

我目前正在一个新项目中使用Twitter Bootstrap.该项目的主要部分是缩略图库,与他们的示例中的缩略图库完全相同(此处:http://twitter.github.com/bootstrap/components.html#thumbnails).

问题是我目前正在根据他们的EXIF方向数据进行css转换(基本上是旋转)图像.当我应用转换(现在使用-webkit-transform,因为我在Chrome上测试)到a时img,它的父元素保持不变,并且图像"溢出"其容器.

使用Chrome,可以测试此行为,然后转到我之前链接的示例缩略图库,检查其中一个占位符图像并向标记添加style="-webkit-transform: rotate(90deg)属性img.图像溢出li容器元素并中断布局.

有没有办法解决这个问题,让bootstrap处理一个css旋转的图像,好像它原来是这样的？我想过手动设置img标签的高度和宽度,他们的父母会调整,但我不知道在实际渲染之前图像在服务器端呈现的大小,所以这似乎排除了这个做法.

哦,顺便说一下,我知道我可以在服务器端转动,我知道这并不难,我只是非常喜欢在浏览器中这样做,如果可能的话.

有任何想法吗？

谢谢!

编辑:Jaap建议我旋转整个容器,如果不是因为我在缩略图lis中有文本节点,这将完美地工作.旋转容器将使文本显示旋转.

我在使用任何使用默认webkit引擎的浏览器(例如默认浏览器,Dolphin HD,亚马逊Kindle Fire Silk浏览器等)中使用CSS3 2D Transforms在Android 2.3中工作时遇到了麻烦.Android 2.3 webkit引擎确实支持2D变换,我已经能够让一些2D变换的网站正确渲染,而不是我的网站!

有没有人知道Android 2.3中可能导致与2D变换冲突的任何问题？或者,有没有一种很好的方法来使用Android 2.3 webkit渲染引擎来定位浏览器的css？当我使用Modernizr时,在这种情况下它不起作用,因为Android 2.3浏览器测试2D变换是正面的.

这是我的网站:http://StevenGerner.com.在首页上,我正在旋转两个元素-90deg(网站标题和一个h2元素),并且都不会在Android 2.3浏览器上旋转.我甚至尝试过其他的css变换,但似乎没有任何改变.如果我将整个页面剥离到基本,那么转换工作完美无缺,所以我的网站上可能还有其他冲突,我只是无法弄清楚是什么!这是特定于变换的CSS:

//Applied to the h2 element which says 'howdy' at the top of the page
    #about-front h2 {
        display: inline-block;
        float: left;
        -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=4)"\9;
        -webkit-transform: rotate(-90deg);
        -webkit-transform-origin: 170% 170%;
        -moz-transform: rotate(-90deg);
        -moz-transform-origin: 170% 170%;
        -ms-transform: rotate(-90deg);
        -ms-transform-origin: 170% 170%;
        -o-transform: rotate(-90deg);
        -o-transform-origin: 170% 170%;
        transform: rotate(-90deg);
        transform-origin: 170% 170%;
        width: 1em;
        text-shadow: -1px 0 #777, 0 2px #333, 2px 0 #333, 0 …

这很奇怪.我正在玩设备方向,但似乎无法使用rotateX和rotateY在Safari(iOS 8.0.2)中工作.

但!如果我使用支持apple-web-app的元标记将其保存到我的主屏幕,它可以正常工作.

这是我的脚本:

$( document ).ready(function() {
window.addEventListener("deviceorientation", handleOrientation, true);

function handleOrientation(e) {
  var alpha    = e.alpha;
  var beta     = e.beta;
  var gamma    = e.gamma;
  $('#z').val(Math.round(alpha)); // Z
  $('#x').val(Math.round(beta)); //  X
  $('#y').val(Math.round(gamma)); // Y
  document.getElementById("box").style.webkitTransform="rotateZ("+Math.round(-alpha)+"deg) rotateX("+Math.round(beta)+"deg) rotateY("+Math.round(-gamma)+"deg)"; 
}
});

你可以在这里看到它(在你的iPhone上):http://kohlin.net/matte/orientation.html 然后尝试将其保存到你的主屏幕.

有线索吗？一个bug？

我正在构建幻灯片菜单.

菜单很长,我需要能够在里面滚动,所以我设置了overflow-y:滚动它.

我使用-webkit-transform(以及其他浏览器上的变体)作为过渡属性.

现在我无法在div内滚动,在div顶部使用滚轮将使整个页面滚动.

如果我更改菜单的行为并转换正确的属性(将菜单设置为右:-320px并将其设置为右回动:0),滚动工作.

这个错误只发生在Safari中,它在Chrome和其他浏览器中运行良好.也适用于iOS.

有人知道解决方法吗？以前有人遇到过这个问题？我似乎无法找到任何信息.谢谢.