标签: transform
使用jQuery动画化CSS变换
我正在尝试为div设置动画,让它围绕y轴旋转180度.当我调用以下代码时,我得到一个jQuery错误:
$("#my_div").animate({
"transform": "rotateY(180deg)",
"-webkit-transform": "rotateY(180deg)",
"-moz-transform": "rotateY(180deg)"
}, 500, function() {
// Callback stuff here
});
});
它说"Uncaught TypeError:无法读取未定义的属性'defaultView'"并说它在jQuery文件本身...我做错了什么？
推荐指数
解决办法
查看次数
应用CSS缩放变换的Chrome背景图像"出血"边缘
在Chrome中使用背景图像对元素进行几次变换后,我看到了奇怪的行为.
我正在尝试在整个屏幕上构建一个具有背景的游戏,以及在该背景周围移动的缩放角色.角色有多个动画帧,我通过以与常见CSS精灵技术类似的方式移动背景位置x或y来显示每个帧.
问题是我在角色的图像中看到了相邻帧的上边缘或左边缘.现在,这只发生在某些尺度上,但它清晰可见并且分散注意力.出于演示的目的,我使用的是具有两个帧的364x1328图像.顶部框架包含一个黑色框,其364x664边界没有红色.底部框架为纯红色.选中边框的顶部框架显示在左侧的图像编辑器中,Chrome的输出粘贴在右侧:
在Chrome的输出中,您可以清楚地看到底部有一个红色边框.鉴于我的背景图像包含在364x664框中,我希望只显示该框中可见的像素.换句话说,我希望看到我所看到的scale(1),但缩小了.Chrome似乎无论出于何种原因重新采样背景图像.
为了使演示变得简单,我已经包含了一个JS小提琴:http: //jsfiddle.net/CL5Gh/
<!DOCTYPE html>
<html>
<head>
<style>
#b
{
-webkit-transform: scale(0.4775);
-webkit-transform-origin: 0 0;
}
#d
{
height: 664px;
width: 364px;
background-image: url(data:image/png,%89PNG%0D%0A%1A%0A%00%00%00%0DIHDR%00%00%01l%00%00%050%02%03%00%00%00%1A%F2%87%B5%00%00%00%2CtEXtCreation%20Time%00Sun%2017%20Feb%202013%2022%3A08%3A49%20%2B1000%FC%E8%C07%00%00%00%07tIME%07%DD%02%11%0B%1B%0B%C2%A0%3B8%00%00%00%09pHYs%00%00%1E%C1%00%00%1E%C1%01%C3iTS%00%00%00%04gAMA%00%00%B1%8F%0B%FCa%05%00%00%00%09PLTE%00%00%00%00%00%00%FF%00%00%3D%FB%DD-%00%00%00%01tRNS%00%40%E6%D8f%00%00%01%A4IDATx%DA%ED%CC1%0D%000%08%000%9EI%C4%24*11%C8%92%B5%02%1A%01%00%00%00%00%00%FC%E4%E45n%B7%DB%EDv%BB%DDn%B7%DB%EDv%BB%DDn%B7%DB%EDv%BB%DDn%B7%DB%EDv%BB%DDn%B7%DB%EDv%BB%DDn%B7%DB%EDv%BB%DDn%B7%DB%EDv%BB%DDn%B7%DB%EDv%BB%DDn%B7%DB%EDv%BB%DDn%B7%DB%EDv%BB%DDn%B7%DB%EDv%BB%DDn%B7%DB%EDv%BB%DDn%B7%DB%EDv%BB%DDn%B7%DB%EDv%BB%DDn%B7%DB%EDv%BB%DDn%B7%DB%EDv%BB%DDn%B7%DB%EDv%BB%DDn%B7%DB%EDv%BB%DDn%B7%DB%EDv%BB%DDn%B7%DB%EDv%BB%DDn%B7%DB%EDv%BB%DDn%B7%DB%EDv%BB%DDn%B7%DB%EDv%BB%DDn%B7%DB%ED%06%00%00%00%00%00%DESs%DCn%B7%DB%EDv%BB%DDn%B7%DB%EDv%BB%DDn%B7%DB%EDv%BB%DDn%B7%DB%EDv%BB%DDn%B7%DB%EDv%BB%DDn%B7%DB%EDv%BB%DDn%B7%DB%EDv%BB%DDn%B7%DB%EDv%BB%DDn%B7%DB%EDv%BB%DDn%B7%DB%EDv%BB%DDn%B7%DB%EDv%BB%DDn%B7%DB%EDv%BB%DDn%B7%DB%EDv%BB%DDn%B7%DB%EDv%BB%DDn%B7%DB%EDv%BB%DDn%B7%DB%EDv%BB%DDn%B7%DB%EDv%BB%DDn%B7%DB%EDv%BB%DDn%B7%DB%EDv%BB%DDn%B7%DB%EDv%BB%DDn%B7%DB%EDv%BB%DDn%B7%DB%EDv%BB%DDn%B7%DB%EDv%BB%DDn%B7%DB%EDv%BB%DDn%B7%DB%EDv%BB%DDn%B7%DB%EDv%BB%DDn%B7%DB%EDv%BB%DDn%B7%DB%EDv%BB%DDn%B7%DB%EDv%BB%DDn%B7%7B%F3n%80%3C%CA%A7%B6%23%99%BC%00%00%00%00IEND%AEB%60%82);
-webkit-transform: scale(0.4375);
}
</style>
</head>
<body>
<div id="b">
<div id="d">
</div>
</div>
</body>
</html>
现在,我不确定这是视频卡还是以某种方式依赖于机器.在小提琴中,您将看到应用了两个比例变换.这模仿了我游戏中发生的事情.第一个是背景缩放,第二个是主角缩放.
我将不胜感激任何帮助.我已经考虑用50px填充每个帧(多少就足够了？)填充以消除问题,但这看起来非常hacky我想要一个真正的答案.
推荐指数
解决办法
查看次数
如何解决消息有效负载的类型为:BufferInputStream Mule中的异常
我已经转换为字节数组但我不断收到此错误:
ERROR 2015-02-25 11:12:30,517 [[ESR].HTTP_Request_Listener.worker.01] org.mule.exception.DefaultMessagingExceptionStrategy:
********************************************************************************
Message : Response code 400 mapped as failure. Message payload is of type: BufferInputStream
Code : MULE_ERROR--2
--------------------------------------------------------------------------------
Exception stack is:
1. Response code 400 mapped as failure. Message payload is of type: BufferInputStream (org.mule.module.http.internal.request.ResponseValidatorException)
org.mule.module.http.internal.request.SuccessStatusCodeValidator:37 (http://www.mulesoft.org/docs/site/current3/apidocs/org/mule/module/http/internal/request/ResponseValidatorException.html)
--------------------------------------------------------------------------------
Root Exception stack trace:
org.mule.module.http.internal.request.ResponseValidatorException: Response code 400 mapped as failure. Message payload is of type: BufferInputStream
at org.mule.module.http.internal.request.SuccessStatusCodeValidator.validate(SuccessStatusCodeValidator.java:37)
at org.mule.module.http.internal.request.DefaultHttpRequester.innerProcess(DefaultHttpRequester.java:202)
at org.mule.module.http.internal.request.DefaultHttpRequester.process(DefaultHttpRequester.java:166)
+ 3 more (set debug level logging or '-Dmule.verbose.exceptions=true' for everything)
******************************************************************************** …推荐指数
解决办法
查看次数
WPF Adorner转型
我正在构建一个控件,用户可以在其中"绘制"放置在内容上的可调整大小的矩形.要调整这些矩形的大小,我在它们上面使用一个包含4个Thumb的Adorner来改变矩形的大小.
问题是,此控件是"可缩放的",这意味着ScaleTransform将根据缩放系数应用于整个控件.Adorner中的Thumbs也受此ScaleTransform的影响.
但我需要它们来保持它们的大小,与缩放因子无关.我尝试将Adorners放在另一个非转换控件的Layer中,而不是矩形层,但这不起作用.我怎样才能做到这一点？
谢谢,Andrej
推荐指数
解决办法
查看次数
如何在XSL/XPath中按部分名称选择元素？
如何使用apply-templates仅按名称(非值)选择以特定模式结尾的元素？假设以下xml ...
<report>
<report_item>
<report_created_on/>
<report_cross_ref/>
<monthly_adj/>
<quarterly_adj/>
<ytd_adj/>
</report_item>
<report_item>
....
</report_item>
</report>
我想<xsl:apply-templates>在所有子<report_item>元素以'adj`结尾的实例上使用,因此,在这种情况下,只选择monthly_adj,quaterly_adj和ytd_adj并使用模板.
<xsl:template match="report">
<xsl:apply-templates select="report_item/(elements ending with 'adj')"/>
</xsl:template>
推荐指数
解决办法
查看次数
变换和累加
是否有人编写了一个符合C++ STL标准的算法,该算法结合std::transform并std::accumulate支持单通道算法,支持一元,二元和甚至(n-ary!)变体,比如说std::transformed_accumulate？我想要这个,因为我发现这种模式在例如线性代数中是高度可重用的,例如在(l1-)范数计算中.l1范数计算元素绝对值的总和.
推荐指数
解决办法
查看次数
将IPv4更改为IPv6字符串
0000:0000:0000:0000:0000:0000:192.168.0.1这样的地址写为0000:0000:0000:0000:0000:0000:c0a8:0001,这是完全相同的地址,但是以十六进制表示法.
如何在PHP中发现,如果一个地址是这样写的:比如::0000:192.168.0.1或0000::0000:192.168.0.1或0000:0000:0000:0000:0000:0000:192.168.0.1等？是否足以检查基于IP的字符串是否具有"." 和':'？
如何将其更改为完整字符串0000:0000:0000:0000:0000:0000:c0a8:0001？
我是正确的,将此更改为IPv4将是这样的:
<?php
$strIP = '0000:0000:0000:0000:0000:0000:192.168.0.1';
$strResult = substr($strIP, strrpos($strIP, ':'));
echo $strResult; //192.168.0.1 ?
?>
...或者是正确的IP字符串表示比这个代码片段更复杂吗？
推荐指数
解决办法
查看次数
Internet Explorer没有抗锯齿旋转图像
我有一个带有背景图像的div,我正在旋转.下面是我的css规则来旋转它:
#services_parallax {
-webkit-transform:rotate(3.1deg); /* Webkit */
transform: rotate(3.1deg); /* firefox & IE9+ */
/* IE7 & 8 */ filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.998537, M12=-0.054079, M21=0.054079, M22=0.998537, sizingMethod='auto expand');
}
问题是在IE中,图像的边缘非常块状和锯齿状,而不是光滑的线条,并且似乎没有抗锯齿.有谁知道解决这个问题？它是在chrome中完成的,直到我通过应用-webkit-backface-visibility:hidden;来应用修复程序.哪个适用于chrome,我只需要一个IE的类似修复,如果存在的话.
要复制此问题,请将以下内容粘贴到HTML文件中并在IE中查看:
<style type="text/css">
#services_parallax { -webkit-transform:rotate(3.1deg); /* Webkit */
transform: rotate(3.1deg); /* firefox & IE9+ */
/* IE7 & 8 */ filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.998537, M12=-0.054079, M21=0.054079, M22=0.998537, sizingMethod='auto expand');
background: url(http://img.netcarshow.com/Pagani-Zonda_R_2009_1600x1200_wallpaper_01.jpg) center center;
background-size:100% auto;
height:100px;
width:700px;
margin-top:50px;
margin-left:50px;
}
</style>
<div id="services_parallax"></div>
推荐指数
解决办法
查看次数
CSS3转换:translateX等价于右边
我想这样做:-webkit-transform: translateX(300px)但是从右边开始而不是左边的原点.
我试过-webkit-transform-origin: 100% 100%,甚至top right没有影响它.
有办法吗？
推荐指数
解决办法
查看次数
图像滑块不连贯
我已经把一个简单的javascript/css图像滑块放在一起,开始只是一个学习练习,但现在我想在现实世界中应用它.问题是我的桌面上的动画很不稳定(这是一款高规格的游戏装备) - 在移动设备上更糟糕(在某种程度上它不再是动画)
你可以在这里看到它:
www.chrishowie.co.uk/sands/
jsfiddle隔离了大部分相关的代码 - 它不是"这不起作用"的问题,所以希望这个小提琴足以帮助优化它.
http://jsfiddle.net/9aozrxy8/5/
总结:我有一个DIV,连续4个图像,每个图像是页面宽度的100%.我使用javascript来翻译X(我已经尝试过translate3d,因为听说这会使用GPU,但没有做太多的差异)而且我设置CSS过渡以简化变换.
我也认为可能我只是想在这个网站上做太多 - 但是后来我看了一些其他网站做得更多,而且它像丝绸一样光滑.所以我想我错过了一些东西.
function slideRight() {
if (sliding) {
return false
};
window.sliding = true;
el = document.getElementById("slider");
cst = getComputedStyle(el);
transformst = cst.transform || cst.webkitTransform || cst.mozTransform;
widthst = cst.width;
widthst = widthst.replace("px", ""); // computed width of slider (7680px)
slidewidth = widthst / 4;
transformst = transformst.replace("matrix(", "");
transformst = transformst.replace(")", "");
transformst = transformst.split(",");
transformst = transformst[4]; // returns current transform in px without unit (px)
if …推荐指数
解决办法
查看次数