CSS3/CSS旋转背景图像

沃梦达教程前端问题

2022-01-01

CSS3 /CSS - spinning background image(CSS3/CSS旋转背景图像)

本文介绍了CSS3/CSS旋转背景图像的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

是否可以在CSS中旋转背景图像？

我可以使用以下命令旋转元素：

@-webkit-keyframes spinX
{  
0%   {-webkit-transform: rotateX(0deg); -webkit-transform-origin: 0% 50% 0;}  
100% {-webkit-transform: rotateX(360deg); -webkit-transform-origin: 0% 50% 0;}  
}

@-webkit-keyframes spinY
{  
0%   {-webkit-transform: rotateY(0deg); -webkit-transform-origin: 0% 0% 5;}  
100% {-webkit-transform: rotateY(360deg); -webkit-transform-origin: 0% 0% 5;}  
}

但是如果我想旋转元素的背景图像怎么办？

什么也找不到，我可以使用gif，但如果可能的话，我想使用CSS！

有什么想法吗？谢谢

我忘了说是否可以使动画支持跨浏览器：p

推荐答案

可以在伪元素(例如After)上设置背景

.main {
    width: 200px;
    height: 300px;
    position: relative;
    border: solid 1px gray;
}

.main:after {
    width: 100%;
    height: 100%;
    position: absolute;
    background: url("http://placekitten.com/800/1200");
    background-size: cover;
    content: '';
    -webkit-animation: spinX 3s infinite;
    animation: spinX 3s infinite;
}

@-webkit-keyframes spinX
{  
0%   {-webkit-transform: rotateX(0deg); -webkit-transform-origin: 0% 50% 0;}  
100% {-webkit-transform: rotateX(360deg); -webkit-transform-origin: 0% 50% 0;}  
}
@keyframes spinX
{  
0%   {transform: rotateX(0deg); transform-origin: 0% 50% 0;}  
100% {transform: rotateX(360deg); transform-origin: 0% 50% 0;}  
}