CSS圖像旋轉變換
[英]CSS Image Rotation Transformation
問題描述
我有這個jsfiddle ，我認為這會使圖像不斷旋轉，但事實並非如此。
使用的HTML：
<img class="rotate" src="http://www.arcelormittal.com/distributionsolutions/content/images/reload_captcha.png" />
使用的CSS：
.rotate{
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
transition-duration: 0.8s;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
transition-property: transform;
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
transform:rotate(360deg);
}
為什么圖像不連續旋轉？
2 個解決方案
解決方案1
4 已采納 2013-07-12 16:15:11
您需要使用動畫，因為它沒有過渡的起點和終點：
.rotate {
-webkit-animation: spin .8s infinite linear;
animation: spin .8s infinite linear;
}
@-webkit-keyframes spin {
100% { -webkit-transform: rotate(360deg); }
}
@-moz-keyframes spin {
100% { -moz-transform: rotate(360deg); }
}
@keyframes spin {
100% {
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
transform:rotate(360deg);
}
}
解決方案2
0 2014-05-14 12:26:34
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:200px;
height:100px;
margin-top:100px;
background-color:yellow;
/* Rotate div */
transform:rotate(90deg);
-ms-transform:rotate(90deg); /* IE 9 */
-webkit-transform:rotate(90deg); /* Opera, Chrome, and Safari */
}
</style>
</head>
<body>
<div><img src="http://www.rltech.co.in/01/images/rllogo.png"/></div>
</body>
</html>
CSS-旋轉變換后圖像偏離中心
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.