标签: 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文件本身...我做错了什么？
7
推荐指数
推荐指数
2
解决办法
解决办法
2万
查看次数
查看次数
黄瓜:如何在不同的变换中使用相同的正则表达式？
我有以下变换:
Transform /^"([^"]+)" Phase$/ do |name|
# Returns the phase named 'name',
# or raises an exception if it doesn't exist
end
它适用于步骤定义,如下所示:
Then /("(?:[^"]+)" Phase) should do something/ do |phase|
# Should fail if the specified phase doesn't exist
end
我还有以下步骤定义,它使用相同的"([^"]+)" Phase模式:
Given /("([^"]+)" Phase) follows ("([^"]+)" Phase)/ do |pre, post|
# Should create the specified phases
end
如果指定的阶段不存在,我不希望步骤定义失败.我想创建阶段.
我想创建一个转换,它将为我创建一个阶段,以便稍微干掉步骤定义,但我不能这样做,因为我已经拥有上面提到的具有完全相同的正则表达式的转换.
基本上,如果它是一个Given步骤,我想创建阶段,如果不是,我想提出失败.
有任何想法吗？
7
推荐指数
推荐指数
1
解决办法
解决办法
369
查看次数
查看次数
转换属性CSS3规模但坚持到底
有没有人知道如何缩放图像但坚持底部？下面是我的代码,我的图像在中间缩放,但我需要它们粘在底部.
.animation_scale{
position:absolute;
top:150px;
left:55px;
display:block;
z-index:-10;
bottom : 0;}
.animation_scale img{
animation-name:animation_scale;
animation-duration:1s;
animation-timing-function:ease;
animation-delay:0s;
animation-iteration-count:1;
animation-direction:alternate;
animation-play-state:running;
animation-fill-mode: forwards;
/* Firefox: */
-moz-animation-name:animation_scale;
-moz-animation-duration:1s;
-moz-animation-timing-function:ease;
-moz-animation-delay:0s;
-moz-animation-iteration-count:1;
-moz-animation-direction:alternate;
-moz-animation-play-state:running;
-moz-animation-fill-mode: forwards;
/* Safari and Chrome: */
-webkit-animation-name:animation_scale;
-webkit-animation-duration:1s;
-webkit-animation-timing-function:ease;
-webkit-animation-delay:0s;
-webkit-animation-iteration-count:1;
-webkit-animation-direction:alternate;
-webkit-animation-play-state:running;
-webkit-animation-fill-mode: forwards;}
@keyframes animation_scale {
0% {
-webkit-transform: scale(0.2) translate(0px);
-moz-transform: scale(0.2) translate(0px);
-o-transform: scale(0.2) translate(0px);}
100% {
-webkit-transform: scale(1.0) skew(0deg) translateY(-10px);
-moz-transform: scale(1.0) skew(0deg) translateY(-10px);
-o-transform: scale(1.0) skew(0deg) translateY(-10px);}}
@-moz-keyframes animation_scale /* Firefox */ …7
推荐指数
推荐指数
2
解决办法
解决办法
9090
查看次数
查看次数
应用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我想要一个真正的答案.
7
推荐指数
推荐指数
1
解决办法
解决办法
1562
查看次数
查看次数
缩放传单地图时,SVG圈不会重新定位
我正在使用d3在传单地图上添加svg圆圈.我的小提琴在这里http://jsfiddle.net/nextstopsun/C3U8g/
我添加了一个reset()函数来映射viewreset事件,以计算包含所有圆的svg g元素的转换.在map viewreset事件上调用此函数.
svg.attr("width", topRight[0] - bottomLeft[0])
.attr("height", bottomLeft[1] - topRight[1])
.style("margin-left", bottomLeft[0] + "px")
.style("margin-top", topRight[1] + "px");
g.attr("transform", "translate(" + -bottomLeft[0] + "," + -topRight[1] + ")");
(该代码最初来自此示例http://bost.ocks.org/mike/leaflet/)
我可以看到g元素的转换参数正在重新计算,但圆圈没有重新定位(或者它们重新定位错误)并且不与地图tilelayer对齐.尽管如此,一切都很好.什么必须改变才能在缩放时正确重新定位？
7
推荐指数
推荐指数
1
解决办法
解决办法
1218
查看次数
查看次数
CSS变换缩放使文本模糊
我有一个悬停效果,当它被触发时,框会放大.唯一的问题是,文本在转换期间似乎模糊,然后在"转换"时再次变得清晰.
在发布之前,我决定进行一项研究并发现这篇文章似乎也与我的问题有关:
如何在Safari中进行WebKit 3D变换后强制重新渲染
http://duopixel.com/stack/scale.html
我已经将他们的答案应用于我的构建,但仍然会发生模糊效果.我在下面提供了一个链接,如果有人可以告诉我我有什么可以解决这将是伟大的!
例如转换代码:
-moz-transform:scale(1.05,1.05);
7
推荐指数
推荐指数
1
解决办法
解决办法
4400
查看次数
查看次数
用于在Chrome中工作的SVG上的CSS动画的transform-origin,而不是FF
我正在尝试使用CSS和SVG创建一个简单的动画:旋转齿轮.动画在Chrome中完美运行,但不适用于Firefox.以下是行动中的代码:http://jsfiddle.net/fL8Qn/
齿轮是SVG文件中的路径:
<div class="svg">
<svg x="0px" y="0px" width="200" height="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<title>PDP</title>
<text x="44" y="120" class="gear_text">PDP</text>
<g transform="translate(50%, 50%)">
<path id="gear1" class="gear go-clockwise" x="0px" y="0px" d="m91.63252,0l-4.16735,23.73752l0.01604,0.01606c-5.09374,0.83228 -10.02215,2.16622 -14.72963,3.9428l0,-0.01584l-15.46727,-18.48038l-14.53742,8.39871l8.25439,22.63163l0.03211,0.01585c-3.9412,3.23531 -7.55353,6.86028 -10.78684,10.8031l-0.01604,-0.04816l-22.63164,-8.25463l-8.39871,14.53743l18.48035,15.48333c-1.77354,4.70347 -3.09585,9.62447 -3.92695,14.71362l-0.01604,-0.01586l-23.73753,4.16734l0,16.79736l23.73753,4.16735l0.01604,-0.01587c0.83109,5.08915 2.15341,10.01014 3.92695,14.71381l-18.48035,15.48312l8.39871,14.53743l22.63164,-8.25444l0.01604,-0.04832c3.23331,3.94261 6.84564,7.56799 10.78684,10.80287l-0.03211,0.0159l-8.25439,22.63168l14.53742,8.39873l15.46727,-18.48027l0,-0.01582c4.70748,1.77637 9.63589,3.11047 14.72963,3.94278l-0.01604,0.01587l4.16735,23.73772l16.78132,0l4.16733,-23.73772l-0.01603,-0.01587c5.09294,-0.83009 10.02274,-2.15297 14.72985,-3.92696l15.4831,18.48047l14.53743,-8.39871l-8.27046,-22.63173c3.93234,-3.22687 7.54289,-6.83942 10.771,-10.7708l22.64757,8.25439l8.38263,-14.53741l-18.4642,-15.48308c1.77402,-4.70432 3.11153,-9.62388 3.94283,-14.71384l23.73775,-4.15126l0,-16.79738l-23.73775,-4.16735c-0.83148,-5.08432 -2.17067,-9.99828 -3.94283,-14.69775l18.4642,-15.4831l-8.38263,-14.53745l-22.64757,8.25443c-3.2281,-3.93136 -6.83842,-7.54391 -10.771,-10.77079l8.27046,-22.63168l-14.53743,-8.39871l-15.4831,18.48042c-4.70711,-1.77378 -9.63691,-3.09688 -14.72985,-3.92696l0.01603,-0.01586l-4.16733,-23.73761l-16.78132,0l0,-0.00011l0,0zm8.39869,40.8716c32.67677,0 59.17564,26.48283 59.17564,59.1596c0,32.67677 -26.49887,59.15962 -59.17564,59.15962c-32.67677,0 -59.15962,-26.48285 -59.15962,-59.15962c0,-32.67677 26.48286,-59.1596 59.15962,-59.1596z" stroke-dashoffset="0" stroke-miterlimit="4" stroke-linejoin="round" stroke-linecap="round" stroke-width="2"/>
</g>
</svg>
并使用CSS应用动画:
.svg {
width:200px;
height:200px;
float:left;
position: fixed;
top: …7
推荐指数
推荐指数
1
解决办法
解决办法
1万
查看次数
查看次数
AmCharts - AmMap与自定义地图显示颠倒
我已经按照AmCharts上的教程创建了一个自定义地图,但是使用了我们之前系统中的SVG(英国的一个是一个例子,但我有大约2000个自定义SVG的定义区域/地区/区域集合).
虽然地图显示没有问题,但它显示为颠倒.
有人可以帮助翻转那些没有重新创建所有SVG的东西吗？
你可以在这里看到问题http://jsfiddle.net/aZt8N/830/
AmCharts.ready(function() {
map = new AmCharts.AmMap();
map.pathToImages = "http://www.ammap.com/lib/3/images/";
//map.panEventsEnabled = true; // this line enables pinch-zooming and dragging on touch devices
map.balloon.color = "#000000";
var dataProvider = {
mapVar: AmCharts.maps.UK,
getAreasFromMap: true
};
map.dataProvider = dataProvider;
map.write("mapdiv");
});
示例SVG(JSON格式):
{
"id": "19",
"title": "Isle of Man",
"d": "M-294128.0419983654 6005604.579318236 L-297849.15 6002052.63 L-302960.48 6004919.03 L-307536.97 6003878.02 L-308772.14 6004362.52 L-305875.18 6009275.65 L-304770.50193180586 6012664.048443736 L-302096.82 6020865.08 L-298362.66970319534 6023706.069639378 L-296413.32 6025189.16 L-291628.35136520385 6032625.148624786 L-288841.99 6036955.24 L-283264.74 6040009.53 L-281429.49 …7
推荐指数
推荐指数
1
解决办法
解决办法
2894
查看次数
查看次数
旋转的3d导航栏
我正在尝试使用带有变换,过渡和透视的纯CSS创建一个3d导航栏.
这是我的代码:
.navbar-fixed-bottom {
background: transparent;
}
.navbar-perspective {
width: 100%;
height: 100%;
position: relative;
-webkit-perspective: 1100px;
-moz-perspective: 1100px;
perspective: 1100px;
-webkit-perspective-origin: 50% 0;
-moz-perspective-origin: 50% 0;
perspective-origin: 50% 0;
}
.navbar-perspective > div {
margin: 0 auto;
position: relative;
text-align: justify;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
transition: all 0.5s;
height: 50px;
font-size:20px;
}
.navbar-primary {
background-color: #cccccc;
z-index: 2;
-webkit-transform-origin: 0% 100%;
-moz-transform-origin: 0% 100%;
transform-origin: 0% 100%;
}
.navbar .navbar-secondary,
.navbar …7
推荐指数
推荐指数
2
解决办法
解决办法
1468
查看次数
查看次数
如何解决消息有效负载的类型为: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)
******************************************************************************** …7
推荐指数
推荐指数
1
解决办法
解决办法
1万
查看次数
查看次数