CSS3 /CSS - Spinning Background Image

CSS3 /CSS - spinning background image

You can do that setting the background on a pseudo element, for instance an 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;}  }

<div class="main"></div>

Rotating a background image with CSS3

you could use the ::after (or ::before) pseudo-element, to generate the animation

div /*some irrelevant css */
{
    background:-webkit-linear-gradient(top,orange,orangered);
    background:-moz-linear-gradient(top,orange,orangered);
    float:left;padding:10px 20px;color:white;text-shadow:0 1px black;
    font-size:20px;font-family:sans-serif;border:1px orangered solid;
    border-radius:5px;cursor:pointer;
}

/* element to animate */
div::after               /* you will use for example "a::after" */
{
    content:' ►';        /* instead of content you could use a bgimage here */
    float:right;
    margin:0 0 0 10px;
    -moz-transition:0.5s all;
    -webkit-transition:0.5s all;
}

/* actual animation */
div:hover::after         /* you will use for example "a.selected::after" */
{
    -moz-transform:rotate(90deg);
    -webkit-transform:rotate(90deg);
}

HTML:

<div>Test button</div>

in your case you will use element.selected class instead of

jsfiddle demo: http://jsfiddle.net/p8kkf/

hope this helps

CSS3 transition on a background image

Sure you can, try something like this:

HTML

<div id="planet">
</div>

CSS

#planet { 
    width:200px;
    height:200px;
    background: transparent url(http://cdn3.iconfinder.com/data/icons/nx11/Internet%20-%20Real.png) no-repeat center center;
}

#planet {
  -webkit-animation-name: rotate;
  -webkit-animation-duration:2s;
  -webkit-animation-iteration-count:infinite;
  -webkit-animation-timing-function:linear;
  -moz-animation-name: rotate;
  -moz-animation-duration:2s;
  -moz-animation-iteration-count:infinite;
  -moz-animation-timing-function:linear;
}

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

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

JSFiddle

CSS background image w/ rotate, repeat and opacity

You can do it like below:

.background {  height: 500px;  width: 500px;  position: relative;  z-index:0;  display: inline-block;  overflow:hidden; /* hide the overflow here not on the pseudo element */  padding: 100px;  border: black 3px solid;}
.background::before {  content: "";  position: absolute;  z-index: -1;  /* 141% ~ sqrt(2)x100% to make sure to cover all the area after the rotation */  width: 141%;  height:141%;  /**/  /* to center*/  left: 50%;  top: 50%;  /* */  background: url(https://cambridgewords.files.wordpress.com/2019/11/funny.jpg);  background-size: 100px 100px; /* size of the image*/  transform:translate(-50%,-50%) rotate(45deg); /* center the element then rotate */  opacity: 0.5;}

<span class='background'>    HElloWorld  </span>

CSS3 Transition spinning div with background image change

I guess you should have to add an :hover for each of the img classes.

Example:

.img:hover{
    background: red;
}

How do you make a spinning bg image with css, javascript, and html?

Do it using css animation

@-webkit-keyframes rot {    0% {-webkit-transform: rotate(0deg);}    100% {-webkit-transform: rotate(360deg);}}@-moz-keyframes rot {    0% { -moz-transform: rotate(0deg);}    100% {-moz-transform: rotate(360deg);}}@-o-keyframes rot {    0% {-o-transform: rotate(0deg);}    100% {-o-transform: rotate(360deg);}}@keyframes rot {    0% {transform: rotate(0deg); }    100% {transform: rotate(360deg);}}
#a{    position:relative;    margin:42px;    width:100px;    height:100px;      border:1px solid black;}#b{    position:absolute;    width:142%;    height:142%;    border:1px solid black;    left:-21px;    top:-21px;    -webkit-animation: rot 2s infinite;    -moz-animation:    rot 2s infinite;    -o-animation:      rot 2s infinite;    animation:         rot 2s infinite;    -webkit-animation-timing-function: linear;    -moz-animation-timing-function: linear;    -o-animation-timing-function: linear;    animation-timing-function: linear;    background:rgba(125,0,0,.5);}

<div id="a">  <div id="b"></div></div>

use keyframes rotate for the background only

Maybe you can apply the rotation animation to another element that holds the background color/image?

.wrap {
  overflow: hidden;
}
.to-rotate {
  box-sizing: border-box;
  padding: 2rem;
  position: relative;
  width: 60vh;
  height: 60vh;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.to-rotate::before {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: url(https://i.ibb.co/PNkdKnR/bgexample.jpg) no-repeat center/cover;
      -webkit-animation-name: rotate;
  -webkit-animation-duration:6s;
  -webkit-animation-iteration-count:infinite;
  -webkit-animation-timing-function:linear;
  -moz-animation-name: rotate;
  -moz-animation-duration:2s;
  -moz-animation-iteration-count:infinite;
  -moz-animation-timing-function:linear;
  border-radius: 100%;
}

img {
  width: 100%;
  max-width: 400px;
  position: relative;
  z-index: 2;
  border: 10px solid white;
  border-radius: 100%;
}

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

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

<div class="wrap">
  <div class="to-rotate">
    <img src="https://i.ibb.co/b6Mc5VP/egg2.jpg" alt="egg" />
  </div>
</div>

How to change rotate background-image, if block is styled by skew

A common solution is to use pseudo-element for the background image and create the inverse skew on it :

.box-blog {  position: relative;  width: 80%;  display: block;  margin: 0 auto;  margin-top: 71px;  height: 192px;  border-radius: 0 40px;  transform: skew(20deg);  background-color: #333;  box-shadow: 15px 0 0 rgba(248, 48, 46, .3);  overflow: hidden;}
.box-blog:before {  content: " ";  background: url(https://lorempixel.com/400/400/) center no-repeat;  background-size: cover;  position: absolute;  top: 0;  right: -40px;  bottom: 0;  left: -40px;  transform: skew(-20deg);}

<div class="box-blog">
</div>

---

Related Topics