css 原生css旋转
CSS rotation – result overview
CSS轮换–结果概述
Is it possible or not? And how? Sometimes, ordinary webdesigner asking himself this question. And here – he can faced with some difficulties. In fact, different browsers still don`t have defined css rules which we can use to rotate html elements. And, they provide us with own custom css styles for each browser. So in result – we should combine different methods, styles to get it to work cross-browser. Today I will tell what we can use for different browsers.
有没有可能? 如何? 有时,普通的网页设计师会问自己这个问题。 在这里–他可能会遇到一些困难。 实际上,不同的浏览器仍未定义css规则,可用于旋转html元素。 而且,它们为每个浏览器提供了自己的自定义CSS样式。 因此,结果–我们应该结合使用不同的方法和样式,以使其能够跨浏览器工作。 今天,我将告诉我们可以用于不同浏览器的内容。
火狐浏览器 (Mozilla Firefox)
As example – we need to rotate some element for 45 degrees. For this browser we can use next styles (we will use mozilla – related styles with prefix ‘-moz’ and webkit):
例如–我们需要将某些元素旋转45度。 对于此浏览器,我们可以使用下一种样式(我们将使用带有前缀'-moz'和webkit的mozilla –相关样式):
-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
One note, it seems that these styles working only in latests mozilla versions (4.x and upper)
请注意,这些样式似乎仅在最新的mozilla版本(4.x及更高版本)中有效
歌剧 (Opera)
For Opera we can use next styles (as you noticed – opera have own prefix ‘-o’):
对于Opera,我们可以使用下一种样式(如您所注意到的,歌剧有自己的前缀“ -o”):
-o-transform:rotate(45deg);
-o-transform:rotate(45deg);
And again, this will available only for Opera version 10.50 and above.
同样,这仅适用于Opera版本10.50及更高版本。
IE浏览器 (Internet Explorer)
Starting from IE version 9 (and above) we can use next styles (again – new prefix – ‘-ms’):
从IE 9(及更高版本)开始,我们可以使用下一种样式(再次-新前缀-'-ms'):
-ms-transform:rotate(45deg);
-ms-transform:rotate(45deg);
In older version of IE this is possible too, but using another ways – via filters.
在较旧版本的IE中,这也是可行的,但是可以使用另一种方式-通过过滤器。
方法1 –使用DXImageTransform.Microsoft.BasicImage。 (Method 1 – using DXImageTransform.Microsoft.BasicImage.)
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
Here – rotation not mean value of angle, this property accept four values: 0 mean 0 degrees, 1 mean 90 degrees, 2 – 180 and 3 – 270 degrees. So we can`t set own custom angle in 45 degrees, but, look to method 2
在这里–旋转不是角度的平均值,此属性接受四个值:0表示0度,1表示90度,2 – 180和3 – 270度。 因此我们无法将自己的自定义角度设置为45度,但是请看方法2
方法2 –使用DXImageTransform.Microsoft.Matrix。 (Method 2 – using DXImageTransform.Microsoft.Matrix.)
This is a little more difficult way, and we will use JavaScript to set necessary values for our Matrix. Here are sample of this JS:
这有点困难,我们将使用JavaScript为Matrix设置必要的值。 这是此JS的示例:
var rad = (45 * Math.PI) / 180.0, //preparing filter values
cos = Math.cos(rad),
sin = Math.sin(rad);
var filter='progid:DXImageTransform.Microsoft.Matrix(sizingMethod="auto expand", M11 = ' + cos + ', M12 = ' + (-sin) + ', M21 = ' + sin + ', M22 = ' + cos + ')';
var elem = document.getElementById('my_image1'); // our destination object
elem.style.filter = filter;
var rad = (45 * Math.PI) / 180.0, //preparing filter values
cos = Math.cos(rad),
sin = Math.sin(rad);
var filter='progid:DXImageTransform.Microsoft.Matrix(sizingMethod="auto expand", M11 = ' + cos + ', M12 = ' + (-sin) + ', M21 = ' + sin + ', M22 = ' + cos + ')';
var elem = document.getElementById('my_image1'); // our destination object
elem.style.filter = filter;
Where 45 in first line – our angle. So in result we will have:
第一行45处-我们的角度。 因此,结果是:
And here you can see how it working in action (if we will loop rotation with step in 1 degree):
在这里,您可以看到它是如何工作的(如果我们以1度为步长循环旋转):
Not perfect, right? And all just because object rotating over top-left corner, not from center of object. We will need to modify script a little – apply custom margins too, something like that:
不完美,对不对? 所有这一切都是因为对象在左上角旋转,而不是从对象中心旋转。 我们将需要稍微修改脚本–也应用自定义边距,如下所示:
Its source code:
其源代码:
<img src="image.gif" id="sample3" />
<img src="image.gif" id="sample3" />
var elem3 = document.getElementById('sample3');
// remember initial sizes
var sizeopt={
w:elem3.width,
h:elem3.height
};
var angle=0;
setInterval(function(){
angle+=1;
//preparing filter values
var rad = (angle * Math.PI) / 180.0,
cos = Math.cos(rad),
sin = Math.sin(rad);
var filter='progid:DXImageTransform.Microsoft.Matrix(sizingMethod="auto expand", M11 = ' + cos + ', M12 = ' + (-sin) + ', M21 = ' + sin + ', M22 = ' + cos + ')';
var text="-ms-filter:"+filter+";filter:"+filter+";";
elem3.style.cssText=text; // apply filter
var w=elem3.width; // obtain element sizes again
var h=elem3.height;
elem3.style.marginLeft=-Math.round((w-sizeopt.w)/2); // apply margins
elem3.style.marginTop=-Math.round((h-sizeopt.h)/2);
},40);
var elem3 = document.getElementById('sample3');
// remember initial sizes
var sizeopt={
w:elem3.width,
h:elem3.height
};
var angle=0;
setInterval(function(){
angle+=1;
//preparing filter values
var rad = (angle * Math.PI) / 180.0,
cos = Math.cos(rad),
sin = Math.sin(rad);
var filter='progid:DXImageTransform.Microsoft.Matrix(sizingMethod="auto expand", M11 = ' + cos + ', M12 = ' + (-sin) + ', M21 = ' + sin + ', M22 = ' + cos + ')';
var text="-ms-filter:"+filter+";filter:"+filter+";";
elem3.style.cssText=text; // apply filter
var w=elem3.width; // obtain element sizes again
var h=elem3.height;
elem3.style.marginLeft=-Math.round((w-sizeopt.w)/2); // apply margins
elem3.style.marginTop=-Math.round((h-sizeopt.h)/2);
},40);
毕竟,我得到了旋转对象的结果,大多数已知的浏览器都应该支持该对象: (After all, I made result of rotated object which should supported by most of known browsers:)
Its code (CSS + JS):
它的代码(CSS + JS):
#sample4 {
-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-o-transform:rotate(45deg);
-ms-transform:rotate(45deg);
}
#sample4 {
-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-o-transform:rotate(45deg);
-ms-transform:rotate(45deg);
}
var rad = (45 * Math.PI) / 180.0,
cos = Math.cos(rad),
sin = Math.sin(rad);
var filter='progid:DXImageTransform.Microsoft.Matrix(sizingMethod="auto expand", M11 = ' + cos + ', M12 = ' + (-sin) + ', M21 = ' + sin + ', M22 = ' + cos + ')';
var elem4 = document.getElementById('sample4');
elem4.style.filter = filter;
var rad = (45 * Math.PI) / 180.0,
cos = Math.cos(rad),
sin = Math.sin(rad);
var filter='progid:DXImageTransform.Microsoft.Matrix(sizingMethod="auto expand", M11 = ' + cos + ', M12 = ' + (-sin) + ', M21 = ' + sin + ', M22 = ' + cos + ')';
var elem4 = document.getElementById('sample4');
elem4.style.filter = filter;
结论 (Conclusion)
I hope that our overview was interesting and useful for you. Good luck!
希望我们的概述对您有所帮助。 祝好运!
翻译自: https://www.script-tutorials.com/css-rotation-how-to-use-rotation-via-css/
css 原生css旋转