标签: webkit-transform
Firefox的webkit-transform替代方案
在Firefox上有-webkit-transform css规则的替代方案吗？
谢谢!
推荐指数
解决办法
查看次数
CSS 变换和悬停属性
已解决- 问题是进行旋转会将一半元素置于网页的中性（零）Z 轴后面，而 WebKit 显然不允许鼠标事件通过该“中性”平面。因此将旋转点更改为面板的右/左边缘解决了它。奇怪，但现在它有效。
我有一个带有四个面板的简单 HTML5/CSS3 页面。这些面板使用 -webkit-transform 将它们组合成一个很好的排列。在 :hover 上，我使用 -webkit-transform 将面板置于前台。代码如下。
发生的情况是 :hover 操作不可靠。如果我在面板上滑动鼠标，通常会在鼠标悬停在面板上时停止移动鼠标，但面板仍处于其原始位置。具体来说，从左向右滑动，最左边的两个面板似乎工作正常，但最右边的两个面板直到鼠标穿过面板的一半时才会放大。
什么会导致这种情况？
编辑：快速跟进，看来放置在转换元素中的链接只能在元素的最左侧（对于两个左侧面板）或最右侧（对于两个右侧面板）一半可点击。换句话说，单击区域仅对元素“较近”的一半有效。
首先，HTML（最小示例）：
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="test.css" />
</head>
<body>
<section id="test">
<article class="tr_left"></article>
<article class="tr_midleft"></article>
<article class="tr_midright"></article>
<article class="tr_right"></article>
</section>
</body>
</html>
和 CSS：
#test article {
display: inline-block;
height: 150px;
width: 160px;
background-color: blue;
-webkit-transition: -webkit-transform 0.2s ease;
}
#test article.tr_left {
-webkit-transform: perspective(400px) rotateY(20deg) scale(1);
}
#test article.tr_midleft {
-webkit-transform: perspective(400px) rotateY(8deg) scale(0.9);
} …推荐指数
解决办法
查看次数
使用-webkit-transform缩放输入框
我将以下CSS转换应用于HTML输入框.
-webkit-transform: scale(.5);
当我在输入框中键入文本直到它填满可见区域时,插入符号继续经过输入的边缘并被隐藏.通常,插入符号和文本会在您键入时滚动.
一旦插入符号超出了预缩放输入的宽度,文本最终会开始滚动.在计算何时滚动文本时,浏览器似乎忽略了缩放.
这只是WebKit浏览器的问题(使用Chrome和iPad测试).-moz-transform等效在FireFox中运行良好.zoom属性在webkit中运行良好,但在iPad上缩放时它不够平滑,所以我不能真正将它用于我的项目.
你可以在这里看到一个例子:http://jsfiddle.net/4Kv6w/
第一个输入框带有-webkit-transform缩放.第二个框是缩放设置.第三是正常的.
任何帮助将不胜感激.
编辑 - 通过使用-webkit-transform将输入框移动到左侧,您也可以在不缩放的情况下解决问题.这是一个例子:http://jsfiddle.net/4Kv6w/15/
推荐指数
解决办法
查看次数
硬件加速css3动画使用-webkit-transform translate3d无法在Samsung Galaxy Tab 10.1上运行
使用硬件加速CSS3标签的动画(参见下面的代码)在Google Chrome PC浏览器和三星Galaxy SIII上的Android浏览器中运行良好.但是,在三星Galaxy Tab 10.1上的Android浏览器上同样不起作用.如何在三星Galaxy Tab设备上实现硬件加速滑入/缩小动画？
<!DOCTYPE html>
<html>
<head>
<style>
#div1
{
border: 1px solid black;
background-color: red;
position: fixed;
left: 0px;
}
#div1.active
{
-webkit-transform-origin: 0% 0%;
-webkit-transition-timing-function: cubic-bezier(0.1, 0.25, 0.1, 1.0);
-webkit-transition-duration:2s;
-webkit-transform: translate3d(-100px,0px,0px);
}
#div1.inactive
{
-webkit-transform-origin: 0% 0%;
-webkit-transition-timing-function: cubic-bezier(0.1, 0.25, 0.1, 1.0);
-webkit-transition-duration:2s;
-webkit-transform: translate3d(0px,0px,0px);
}
#button1
{
position: fixed;
left: 200px;
}
</style>
<script>
var flag = 1;
function myFunction()
{
if (++flag % 2 === 0) {
//alert("active");
document.getElementById("div1").setAttribute("class", "");
document.getElementById("div1").setAttribute("class", …android-browser css-transitions webkit-transform samsung-mobile
推荐指数
解决办法
查看次数
jQuery draggable和-webkit-transform:scale();
我有一种情况,里面div有可拖动的物品.但是,当div使用缩放父级时-webkit-transform,拖动显然会停止正常工作.
我在这里重现了这个场景.
如您所见,可拖动项目相对于文档移动,即使父项的比例完全不同.
我有缩放(1.5在示例中)作为JS中的变量,所以我可以使用它,但在哪里？我需要按比例划分拖动距离,对吗？我在哪里可以做到这一点？
编辑:我已经尝试将函数设置为drag-event,但无法弄清楚如何实际改变拖动距离.
Edit2:我挖掘了jQuery UI源代码,似乎没有办法从事件中做到这一点drag:
if(this._trigger('drag', event, ui) === false) {
this._mouseUp({});
return false;
}
如您所见,回调函数的返回值不以任何方式存储.在回调被触发后,元素的位置会发生变化,因此更改回调中的CSS不起作用.
你可以看到相关的代码在这里通过使用浏览器搜索以该字符串:
_mouseDrag: function(event, noPropagation) {
推荐指数
解决办法
查看次数
-webkit-transform:在iPad上翻译块状渲染
所以我理解translate/translate3d使用GPU,但由于某种原因,它导致大型图形在iPad上以块/块的形式呈现.在使用翻译时,我很难找到任何声明图像最大宽度/高度的地方.
我希望能够在转换属性上使用css转换,但不能因为这个问题.即使是'top'属性上的css转换也比使用jQuery.animate()之类的东西执行得慢.
有什么建议吗？
推荐指数
解决办法
查看次数
webkit变换规模制作项目消失
我试图在我的HTML页面中缩放div.这个div包含很多canvas元素和其他div元素.基本上,此div充当页面中所有其他项的容器.使用Chrome"23.0.1271.95 m"和IOS6.0 safari,缩放后不会出现此div右侧和底部的项目.如果我调整窗口大小(或更改iPad上的方向),div会正确缩放并开始显示项目,但在一定大小后会再次消失.
这曾经适用于IOS 5.0和以前的chrome/safari版本.这是最新webkit版本中的错误吗？此外,是否有任何解决方法来避免这种行为？
推荐指数
解决办法
查看次数
在Chrome中启用透视CSS转换？
当我用#board(灰色的)时使用这种风格
-webkit-transform: perspective(500px) rotateX(45deg);
-moz-transform: perspective(500px) rotateX(45deg);
它在Firefox中看起来如何:
但是在chrome中:
我们需要的是Firefox中的那个.那么我们应该怎么做才能在chrome中看到相同的外观呢？
推荐指数
解决办法
查看次数
css @ -moz-keyframes动画不能在firefox 18.0.1上运行
firefox 18.0.1上的css @ -moz-keyframes动画无效,
我在之前的版本上检查了这个动画(忘了版本以前的号码),它正在工作,
这是动画
<html>
<head>
<style type="text/css">
@-webkit-keyframes animation {
0% { -webkit-transform:translate(100px,100px) scale(1); }
50% { -webkit-transform:translate(00px,00px) scale(2); }
100% { -webkit-transform:translate(100px,100px) scale(1); }
}
@-moz-keyframes animation_m {
0% { -moz-transform:translate(100px,100px) scale(1); }
50% { -moz-transform: translate(00px,00px) scale(2); }
100% { -moz-transform:translate(100px,100px) scale(1); }
}
.cc1{
-webkit-animation-name: "animation";
-webkit-animation-duration: 2s;
-webkit-animation-timing-function: linear;
-moz-animation-name: "animation_m";
-moz-animation-duration: 2s;
-moz-animation-timing-function: linear;
}
#id1,#ci1{
position:absolute;
top:0px;
left:0px;
}
</style>
<script type="text/javascript">
window.onload=function(){
var e=document.getElementById("ci1");
var ctx=e.getContext("2d");
ctx.fillStyle="#f00";
ctx.fillRect(0,0,90,90);
}
</script> …推荐指数
解决办法
查看次数
将变换值添加到元素上已有的当前变换中？
比方说,我有一个div是有translateX和translateY值动态增加.
<div class="object child0"
style="-webkit-transform: translateX(873.5px) translateY(256px);
width: 50px; height: 50px;">
我想添加rotateY(20deg)到当前的转换,但通过element.style.webkitTransform = "rotateX(20deg)"丢失其他值来应用它
.
有没有办法添加rotateY而不丢失translateX和translateY转换？
推荐指数
解决办法
查看次数