如何在两个方向上将图像旋转 90 度
Posted
技术标签:
【中文标题】如何在两个方向上将图像旋转 90 度【英文标题】：how to rotate image 90 digree on both direction 【发布时间】：2013-08-03 11:29:11 【问题描述】：我自己很努力，但解决了我的问题。 我的查询是： 我有一个图像，我想将此图像旋转为从开始以慢动作翻转到 90 度，然后以相同的方式返回 90 度。 请告诉我解决方案，我该怎么做？
提前致谢。
我使用了这个代码
<style type='text/css'>
.img
transform: scale(-1, 1);
-moz-transform: scale(-1, 1);
-webkit-transform: scale(-1, 1);
-o-transform: scale(-1, 1);
-khtml-transform: scale(-1, 1);
-khtml-transform: scale(-1, 1);
-khtml-transform:speed 5s;
-khtml-transform:speed 5s; /* Safari */
</style>
<script type='text/javascript'>//<![CDATA[
$(window).load(function()
/*$('#image').mouseover(function()
$(this).addClass('img');
).mouseleave(function()
$(this).removeClass('img');
);*/
//setTimeout(addclass(),5000)
setTimeout(function() addclass(); ,5000);
);//]]>
function addclass()
$("#add_remove").hide();
$("#image").addClass('img');
setTimeout(function() removeclass(); ,5000);
function removeclass()
$("#add_remove").show();
$("#image").removeClass('img');
setTimeout(function() addclass(); ,5000);
</script>
</head>
<body>
<img id="image" src="robot_upper.png"/>
</body>
【问题讨论】：
请在问题中包含您尝试过的内容。 欢迎来到 SO！分享您尝试过的内容并具体说明您面临的确切问题是个好主意 你为什么不谷歌image processing或image rotation？或者向我们展示您尝试编写但失败的代码？
寻找 CSS3 变换和过渡。
【参考方案1】：
您可以使用 CSS3 过渡和动画 这是链接并去学习。 http://www.w3schools.com/css3/css3_transitions.asp
【讨论】：
【参考方案2】：你可以顺时针和逆时针使用它
transform:rotate(90deg);
-ms-transform:rotate(90deg); /* IE 9 */
-webkit-transform:rotate(90deg); /* Safari and Chrome */
和
transform:rotate(-90deg);
-ms-transform:rotate(-90deg); /* IE 9 */
-webkit-transform:rotate(-90deg); /* Safari and Chrome */
【讨论】：
感谢回复，但我不想以慢动作水平翻转 使用 transform: rotateY(180deg);transition: 0.6s;【参考方案3】：我不确定这是否正是您所追求的，但这确实会进行轮换。
编辑：
我想我会在这里发布代码，看看它是否有帮助。
我已经像你一样设置了元素，然后只是使用 CSS 动画来控制过渡。
CSS：
/* defines the animation to be used, in this case I have called it 'waving', please note the browser pre-fixes are required for this to work cross browser */
@-webkit-keyframes waving
0%
-webkit-transform: rotate(90deg);
50%
-webkit-transform: rotate(-90deg);
100%
-webkit-transform: rotate(90deg);
@-moz-keyframes waving
0%
-moz-transform: rotate(90deg);
50%
-moz-transform: rotate(-90deg);
100%
-moz-transform: rotate(90deg);
@-o-keyframes waving
0%
-o-transform: rotate(90deg);
50%
-o-transform: rotate(-90deg);
100%
-o-transform: rotate(90deg);
@keyframes waving
0%
transform: rotate(90deg);
50%
transform: rotate(-90deg);
100%
transform: rotate(90deg);
#image
-webkit-animation: waving 5s infinite; /* Safari 4+ */
-moz-animation: waving 5s infinite; /* Fx 5+ */
-o-animation: waving 5s infinite; /* Opera 12+ */
animation: waving 5s infinite; /* IE 10+ */
CodePen Link
【讨论】：
感谢回复，但我想以慢动作水平翻转。 我已经更新了水平翻转的代码，让我知道这是否适合你以上是关于如何在两个方向上将图像旋转 90 度的主要内容，如果未能解决你的问题，请参考以下文章