Tag: css transforms

-webkit-transform：使用position：absolute: 我有一系列的div使用-webkit-transform从负边距顶部向下滑动到屏幕上的位置。问题是，如果没有适用于他们的边缘优势，他们最终会坐在他们通常会坐的地方。这意味着如果我显示第二个div，它有一个空白空间，大小超过它的第一个div。为了解决这个问题，我可以对第二个div应用负余量顶部，但我认为这很麻烦。我主要担心的是，如果dropdiv1的高度发生变化，那么我将不得不重置点击function上的值，让其他div在显示时再次正确对齐。有没有办法修改-webkit-transform以合并postion：absolute？我目前的代码是： CSS： #dropdiv1 { -webkit-transform: translate(0, -3000px); -webkit-transition: all ease-in 1s; } #dropdiv2 { -webkit-transform: translate(0, -3400px); -webkit-transition: all ease-in 1s; } #dropdiv3 { -webkit-transform: translate(0, -4200px); -webkit-transition: all ease-in 1s; } JQuery的： $(‘#clickme1’).click( function() { $(‘#dropdiv1’).css(‘-webkit-transform’,’translate(0, -335px)’); }); $(‘#clickme2’).click( function() { $(‘#dropdiv2’).css(‘-webkit-transform’,’translate(0, -2335px)’); }); $(‘#clickme3’).click( function() { $(‘#dropdiv3’).css(‘-webkit-transform’,’translate(0, […]

使用Javascript / jQuery获取rotate3d值: 具有以下转换的元素： style=”transform: rotate3d(1, 0, 0, -50deg);” 我希望能够使用Javascript / jQuery获得-50的值。我想得到绝对值，所以如果它是370deg，我不想得到10，而是370。使用$(‘#element’).css(‘transform’)返回如下矩阵： matrix3d(1, 0, 0, 0, 0, 0.642788, -0.766044, 0, 0, 0.766044, 0.642788, 0, 0, 0, 0, 1) 哪个可以更好地表示为： matrix3d( 1, 0, 0, 0, 0, 0.642788, -0.766044, 0, 0, 0.766044, 0.642788, 0, 0, 0, 0, 1 ) 解决方程是获得这个值的唯一方法吗？知道Z = 0和X = 1为rotate3d（1,0,0，-50deg）; 没有更快的替代方案吗？

通过js组合css3变换: 请问有没有办法在一段时间内结合更多的CSS3变换？例如，当我设置它 $bgWrapper.css({ ‘-webkit-transform’ : ‘ scale3d(‘ + currScale + ‘, ‘+ currScale +’, 1)’ }); 然后片刻之后 $bgWrapper.css({ ‘-webkit-transform’ : ‘translate3d(‘+ ((currCoords[0])/currScale) +’px, ‘+ ((currCoords[1])/currScale) +’px, 0px) ‘ }); 我遇到了问题。第一个变换被第二个变换覆盖，但这就是我绝对不希望发生的事情。所以我观察到我可以组合这些值，所以我可以暂时存储旧值并执行此操作 var tmpTransform = $bgWrapper.css(‘-webkit-transform’); $bgWrapper.css({ ‘-webkit-transform’ : ”+ tmpTransform +’translate3d(‘+ ((currCoords[0])/currScale) +’px, ‘+ ((currCoords[1])/currScale) +’px, 0px) ‘ }); 但即使这样也不正确，重复通话也存在问题。那么有没有办法如何获得css3规模的精确值vie javascript？有没有办法如何通过js获得CSS3翻译的确切值？目前我只获得具有这些值的矩阵，当然我可以解析它，但我希望有更好的解决方案。 […]

CSS3：如何同时旋转和缩放img？: 我很困惑。为什么我不能同时使用刻度和旋转？我试过这个，但它不起作用： .rotate-img{ -webkit-transform:scale(2,2); -webkit-transform:rotate(90deg); margin-left:20%; margin-top:10%; } 我尝试过jQuery，但两种方法都不起作用： .zoom{ -webkit-transform:scale(2,2); margin-left:20%; margin-top:10%; } $(document).ready(function(){ $(“img”).dblclick(function(){ $(this).addClass(“zoom”); $(this).contextmenu(function(){ $(this).css(“-webkit-transform”,”rotate(90deg)”); return false; }) }); }) 我怎么能缩放img，当我点击右键然后旋转90度。

如果CSS转换2D可用，则使用JavaScript或jQuery进行检测: 我在我的网站上显示一个元素，我用-90deg旋转，但如果浏览器不支持CSS变换，元素看起来错位并且不太好。现在我想用JavaScript或jQuery检测（如果jQ或JS是无关紧要的，因为我在我的网站上使用/加载了jQ），如果支持通过CSS进行此轮换？我知道Modernizr，但只是为了那个小东西，我不想包括整个库（并加快网站的速度加载）。

如何获得CSS旋转元素的实际（非原始）高度: 我需要获得几个不同元素的实际高度（为了精确定制工具提示定位），并且这些元素中的一些（不是全部）被旋转。 $（elem）.outerHeight（）返回原始高度，而不是实际显示的高度。这是一个非常简单的例子： http ： //jsfiddle.net/NPC42/nhJHE/ 我在这个答案中看到了一个可能的解决方案： https ： //stackoverflow.com/a/8446228/253974 ，但我仍然希望有一种更简单的方法。

不要覆盖css属性，而是使用jQuery添加它们: 我只是想知道如何使用jquery .css（）函数不覆盖，而是为css属性添加其他值。例如，我有一个元素，目前有css transform:translate(-50%, -50%)就可以了。我想使用jQuery .css（）函数来ADD transform: rotate(90deg) ，但是当我使用它时，它会覆盖它。如果我的描述令人困惑，请查看这个小提琴。 http://jsfiddle.net/justinbchristensen/mvhwbjLo/1/ 您将在小提琴中看到，当您第一次单击按钮时，方块将失去其原始变换，向下滑动并旋转，但随后对按钮的所有单击都会旋转方块，因为它不会丢失’transform：translate’属性。我不想在我的.css（）函数中说element.css(‘transform’, ‘translate(-50%,-50%) rotate(90deg)’ ，我只是想能够添加旋转到现有转换。有没有办法做到这一点？

CSS3：转换属性在chrome中无法正常工作: 我正在努力实现以下的东西..它在Firefox中工作得很好，但同样的CSS 在chrome中工作有点像下面所示我认为-webkit-transform-origin: 50% 100%; 在chrome或其工作中不起作用但不如预期的那样演示Jsfiddle #flyDiv { width:720px; height:420px; transform-origin: 50% 100%; perspective: 300; transform: perspective(300px) rotateX(15deg); -webkit-transform: perspective(300px) rotateX(15deg); }

将变换值添加到元素上已有的当前变换中？: 假设我有一个div ，它具有动态添加的translateX和translateY值。我想将rotateY(20deg)添加到当前变换中，但是通过element.style.webkitTransform = “rotateX(20deg)”应用它会丢失其他值。有没有办法添加rotateY而不会丢失translateX和translateY转换？