CSS3旋转动画-Java 学习之路

184

<img class="image" src="" alt="" width="120" height="120">

无法让这个动画图像工作，它应该做360度旋转 .

我想下面的CSS有些问题，因为它只是保持不动 .

.image {
    float: left;
    margin: 0 auto;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 120px;
    margin-top: -60px;
    margin-left: -60px;

    -webkit-animation-name: spin;
    -webkit-animation-duration: 4000ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;

    -moz-animation-name: spin;
    -moz-animation-duration: 4000ms;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;

    -ms-animation-name: spin;
    -ms-animation-duration: 4000ms;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;

    animation-name: spin;
    animation-duration: 4000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;

    @-ms-keyframes spin { 
        from { 
            -ms-transform: rotate(0deg); 
        } to { 
            -ms-transform: rotate(360deg); 
        }
    }
    @-moz-keyframes spin { 
        from { 
            -moz-transform: rotate(0deg); 
        } to { 
            -moz-transform: rotate(360deg); 
        }
    }
    @-webkit-keyframes spin { 
        from { 
            -webkit-transform: rotate(0deg); 
        } to { 
            -webkit-transform: rotate(360deg); 
        }
    }
    @keyframes spin { 
        from { 
            transform: rotate(0deg); 
        } to { 
            transform: rotate(360deg); 
        }
    }
}

5 回答

398

如果你想翻转图像，你可以使用它 .

.image{
    width: 100%;
    -webkit-animation:spin 3s linear infinite;
    -moz-animation:spin 3s linear infinite;
    animation:spin 3s linear infinite;
}
@-moz-keyframes spin { 50% { -moz-transform: rotateY(90deg); } }
@-webkit-keyframes spin { 50% { -webkit-transform: rotateY(90deg); } }
@keyframes spin { 50% { -webkit-transform: rotateY(90deg); transform:rotateY(90deg); } }

回复于 2024-05-09T01:33:46+08:00

26
要实现360度旋转，这里是Working Solution .

The HTML:
```
<img class="image" src="your-image.png">
```
The CSS:
```
.image {
    overflow: hidden;
    transition-duration: 0.8s;
    transition-property: transform;
}
.image:hover {
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
}
```
你必须将鼠标悬停在图像上，你将获得360度旋转效果 .

PS：添加一个 -webkit- 扩展名，以便在chrome和其他webkit浏览器上工作 . 你可以查看webkit的更新小提琴 HERE
回复于 2024-05-09T01:33:46+08:00
-5
这应该对你有帮助

下面的jsfiddle链接将帮助您了解如何旋转图像 . 我使用相同的旋转时钟拨号 .

http://jsfiddle.net/xw89p/
```
var rotation = function (){
   $("#image").rotate({
      angle:0, 
      animateTo:360, 
      callback: rotation,
      easing: function (x,t,b,c,d){       
          return c*(t/d)+b;
      }
   });
}
rotation();
```
其中：•t：当前时间，

•b：求恩 Value ，

•c：更改值，

•d：持续时间，

•x：未使用

无缓和（线性缓和）：函数（x，t，b，c，d）{return b（t / d）* c; }
回复于 2024-05-09T01:33:46+08:00

这是 demo . 正确的动画CSS：

.image {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 120px;
    margin:-60px 0 0 -60px;
    -webkit-animation:spin 4s linear infinite;
    -moz-animation:spin 4s linear infinite;
    animation:spin 4s linear infinite;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

<img class="image" src="http://i.stack.imgur.com/pC1Tv.jpg" alt="" width="120" height="120">

关于代码的一些注意事项：

您已嵌套 .image 规则中的关键帧，这是不正确的
float:left 不适用于绝对定位的元素
看看caniuse：IE10不需要 -ms- 前缀

回复于 2024-05-09T01:33:46+08:00

我有一个使用与你相同的旋转图像：

.knoop1 img{
    position:absolute;
    width:114px;
    height:114px;
    top:400px;
    margin:0 auto;
    margin-left:-195px;
    z-index:0;

    -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;

     overflow:hidden;
}

.knoop1:hover img{
    -webkit-transform:rotate(360deg);
    -moz-transform:rotate(360deg); 
    -o-transform:rotate(360deg);
}

回复于 2024-05-09T01:33:46+08:00

CSS3旋转动画

5 回答

相关问题