是否可以在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
解决方法
你可以这样设置一个伪元素的背景,比如后面的
.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;} }
<div class="main"></div>
原文地址:https://www.jb51.cc/css/214152.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。