图片缩小右移旋转

Posted 曦言鸢默

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了图片缩小右移旋转相关的知识,希望对你有一定的参考价值。

        图片在缩小右移的同时旋转720度效果图

 1     <style>
 2         body{
 3             position: relative;
 4         }
 5         #box img{
 6             width: 300px;
 7             position: absolute;
 8             height: 300px;
 9             background: #f88e11;
10             -webkit-transform-origin: center center;
11             -moz-transform-origin: center center;
12             -ms-transform-origin: center center;
13             -o-transform-origin: center center;
14             transform-origin: center center;
15             /*border-radius: 50%;*/
16             /*animation: smaller 5s linear infinite;*/
17             -webkit-animation:smaller 3s linear infinite;
18             -o-animation:smaller 3s linear infinite;
19             animation:smaller 3s linear infinite;
20         }
21         @keyframes smaller{
22             0%{
23                 left: 0px;
24                 top: 100px;
25                 width: 480px;
26                 height: 300px;
27                 -webkit-transform: rotate(0deg);
28                 -moz-transform: rotate(0deg);
29                 -ms-transform: rotate(0deg);
30                 -o-transform: rotate(0deg);
31                 transform: rotate(0deg);
32             }
33           
34             100%{
35                 left: 700px;
36                 top: 0;
37                 width: 0px;
38                 height: 0;
39                 -webkit-transform: rotate(720deg);
40                 -moz-transform: rotate(720deg);
41                 -ms-transform: rotate(720deg);
42                 -o-transform: rotate(720deg);
43                 transform: rotate(720deg);
44             }
45         }
46     </style>

 

1 <div id="box"><img src="1.jpg" alt="图片"></div>

参考图:

1.jpg

以上是关于图片缩小右移旋转的主要内容,如果未能解决你的问题,请参考以下文章

vue 快速给图片添加,点击旋转、放大、缩小、拖动的效果

安卓 为啥我旋转图片后图片缩小了,请高手帮帮忙啊

赵雅智_运用Bitmap和Canvas实现图片显示,缩小,旋转,水印

javascript 实现双指放大缩小旋转图片

canvas里有一张图,怎么实现鼠标可以拖动该图片移动,放大缩小旋转

Word中图片不能旋转,怎么办?