CODEWITHSUNDEEP
htmlcss
Gabriela Boyadjiyska
Gabriela Boyadjiyska

Reputation: 87

CSS animation rotation

I have two background images in one container and I am trying to rotate only one of them but it doesn't seem to work. I manage either to rotate both or nothing happens. Thanks in advance.

@keyframes image {
    0% { background-position: right, center}
    50% {transform: rotateY(180deg,0deg)}
    100% {background-position: left, center}
}

Upvotes: 0

Views: 82

Answers (2)

Bhavin Shah
Bhavin Shah

Reputation: 2482

.container{
  border:thin black solid;
  height:200px;
}

.bg1 {
    margin: 20px;
    width: 100px; 
    height: 100px;    
    background: #000000;
    -webkit-animation: spin 4s infinite linear;
    float:left;
}


.bg2 {
    margin: 20px;
    width: 100px; 
    height: 100px;    
    background: #f00;
    float:left;
}

/*Chrome*/
@-webkit-keyframes spin {
	0%  {-webkit-transform: rotate(0deg);}
	100% {-webkit-transform: rotate(360deg);}	
}


/*Mozilla*/
@-moz-keyframes rotate {
  from {-moz-transform:rotate(0deg);}
  to {  -moz-transform:rotate(360deg);}
}
<div class="container" >
  <div class="bg1"></div>
  <div class="bg2"></div>
</div>

JSFiddle Demo

Try this. is this the same that you want?

Upvotes: 0

Rahul
Rahul

Reputation: 4364

Transforming the Background Only

#myelement {
  position: relative;
  overflow: hidden;
}
#myelement:before {
  content: "";
  position: absolute;
  width: 200%;
  height: 200%;
  top: -50%;
  left: -50%;
  z-index: -1;
  background: url(background.png) 0 0 repeat;
  -webkit-transform: rotate(30deg);
  -moz-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  -o-transform: rotate(30deg);
  transform: rotate(30deg);
}

you can find the very well explained tutorial and ex here https://www.sitepoint.com/css3-transform-background-image/

Upvotes: 1

Related Questions