我正在创建一个跨浏览器兼容的旋转(ie9 +),我在jsfiddle中有以下代码
$(document).ready(function () {
DoRotate(30);
AnimateRotate(30);
});
function DoRotate(d) {
$("#MyDiv1").css({
'-moz-transform':'rotate('+d+'deg)',
'-webkit-transform':'rotate('+d+'deg)',
'-o-transform':'rotate('+d+'deg)',
'-ms-transform':'rotate('+d+'deg)',
'transform': 'rotate('+d+'deg)'
});
}
function AnimateRotate(d) {
$("#MyDiv2").animate({
'-moz-transform':'rotate('+d+'deg)',
'-webkit-transform':'rotate('+d+'deg)',
'-o-transform':'rotate('+d+'deg)',
'-ms-transform':'rotate('+d+'deg)',
'transform':'rotate('+d+'deg)'
}, 1000);
}
CSS和HTML非常简单,仅用于演示:
.SomeDiv{
width:50px;
height:50px;
margin:50px 50px;
background-color: red;}
<div id="MyDiv1" class="SomeDiv">test</div>
<div id="MyDiv2" class="SomeDiv">test</div>
使用时旋转有效,使用时.css()无效.animate(); 为什么这样,有没有办法解决它？
谢谢.
我试图-webkit-transform: translateY('')在变量中获取属性.
HTML
<form class="form-con" style="-webkit-transform: translateY(-802px);"></form>
JS
$('.foo').click(function() {
var current_pull = parseInt($('.form-con').css('transform').split(',')[4]);
});
这将返回"0",而不是正确的值.
我有以下代码设置元素的旋转角度:
$('#1-link-2')
.css('height', length)
.css('-webkit-transform', 'rotate(' + angle + 'deg)')
.css('-moz-transform', 'rotate(' + angle + 'deg)')
.css('-o-transform', 'rotate(' + angle + 'deg)')
.css('-ms-transform', 'rotate(' + angle + 'deg)')
.css('transform', 'rotate(' + angle + 'deg)');
其中角度是先前动态计算的(它基于鼠标的位置).
我需要能够检索角度.我为初学者尝试了这个:
var angle= $("#1-link-2").css('-webkit-transform');
$('#node-title').html(angle); //just to print it to the screen for me
它给了我这个文字
matrix(0.5425908601788315, -0.839997118120292, 0.839997118120292, 0.5425908601788315, 0, 0)
如何以度为单位检索角度？
我正在使用CSS-Tricks中的代码来获取当前使用JavaScript的旋转变换(在CSS中).
JavaScript函数:
function getCurrentRotation( elid ) {
var el = document.getElementById(elid);
var st = window.getComputedStyle(el, null);
var tr = st.getPropertyValue("-webkit-transform") ||
st.getPropertyValue("-moz-transform") ||
st.getPropertyValue("-ms-transform") ||
st.getPropertyValue("-o-transform") ||
st.getPropertyValue("transform") ||
"fail...";
if( tr !== "none") {
console.log('Matrix: ' + tr);
var values = tr.split('(')[1];
values = values.split(')')[0];
values = values.split(',');
var a = values[0];
var b = values[1];
var c = values[2];
var d = values[3];
var scale = Math.sqrt(a*a + b*b);
// arc sin, convert from radians …我试图在它上面应用一个/几个CSS3转换后获得JavaScript中元素的高度.
#transformed{
transform:scale(.5);
}
不幸的是,JQuery的outerHeight似乎没有天真地做到这一点.
$('#after').outerHeight(); //not affected by the transformation
我有:
<div class="abc" style="transform : [stuff]"></div>
which displays in chrome as
<div class="abc" style="-webkit-transform : [stuff]"></div>
所以我想[stuff]用一个选择器从这两个中获取.
$(".abc").css('whatcomeshere?')
有没有像我在这里可以使用的正则表达式？还有其他方法吗？我想有一个简单的方法,因为处理这些事情在JQuery中很常见.
编辑:澄清
我不是在寻找从变换矩阵中检索角度或元素的方法.
我只是在寻找一个选择这将同时检索transform和-webkit-transform风格$(".abc").css('transform')不适合这两种工作.
Firefox 15 - Chrome:
$('#img2').css('transform');
return => "rotate(90deg)"
Firefox 16
$('#img2').css('transform');
return => matrix(0, 1, -1, 0, 0, 0);
知道怎么在firefox中获得旋转值16什么是矩阵？
在Firebq我得到:
element.style {
height: auto;
transform: rotate(90deg);
width: auto;
}
我想要一个按钮,每次单击时将元素旋转5度.我已经能够用边界宽度做类似的事情
$(document).on('click', '.brdr_width_up', function() {
$(ws.currentCell).css({'border-top-width' : '+=1', 'border-right-width' : '+=1','border-bottom-width' : '+=1','border-left-width' : '+=1'});
});
但同样的想法似乎不适用于transform:rotate:
$(document).on('click', '.rotate_cw', function() {
$(ws.currentCell).css({'-webkit-transform': 'rotate(+=5deg)'});
$(ws.currentCell).css({'-moz-transform': 'rotate(+=5deg)'});
var deg = $(ws.currentCell).css({'-moz-transform': 'rotate()'});
});
上面的var行不会带回当前的旋转,所以我可以添加它.
有谁知道这样做的方法？
谢谢