Image Rotation with CSS

Asked

Viewed 2,191 times

0

Guys, someone can help me because my image is not rotating?

<html>
<head>
    <style src="reset.css"></style>
    <style src="header.css"></style>
    <meta charset="utf-8">
    <title>Kw Design - Agência Digital</title>
</head>
<body>
    <header>
        <div class="logo_header">
            <img src="logo.png" alt="Logo Kw Desgign">
        </div>
    </header>
</body>
</html>

css...

.logo_header
{
    transform: rotate(-15deg);
    position:relative;
    top:-75px;
    left:-100px;
}
css css3 css-transitions

  • Try to set a height and/or width for your div.

2 answers

2


The css call is wrong....

<link rel="stylesheet" type="text/css" href="style.css">

0

If you want to make the logo rotate, use as follows:

.logo_header {
  transform: rotate(-15deg);
  position:relative;
  
  top:50%;
  left:50%;
  margin-left:-50px;
  width: 100px;
  height: 100px;
  
  /* CÓDIGO PARA CHAMAR A ANIMAÇÃO */
  -webkit-animation: rodaroda 3s linear alternate 3;
  -moz-animation: rodaroda 3.0s linear infinite;
  -ms-animation: rodaroda 3.0s linear infinite;
  -o-animation: rodaroda 3.0s linear infinite;
  animation: rodaroda 3.0s linear infinite;
}

/* KEY FRAMES PARA FAZER OS GIROS */
@-webkit-keyframes rodaroda {
	0% { -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); -ms-transform:rotate(0deg); -o-transform:rotate(0deg); transform:rotate(0deg); }
	50% { -webkit-transform:rotate(180deg); -moz-transform:rotate(180deg); -ms-transform:rotate(180deg); -o-transform:rotate(180deg); transform:rotate(180deg); }
	100% { -webkit-transform:rotate(360deg); -moz-transform:rotate(360deg); -ms-transform:rotate(360deg); -o-transform:rotate(360deg); transform:rotate(360deg); }
}
@-moz-keyframes rodaroda {
	0% { -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); -ms-transform:rotate(0deg); -o-transform:rotate(0deg); transform:rotate(0deg); }
	50% { -webkit-transform:rotate(180deg); -moz-transform:rotate(180deg); -ms-transform:rotate(180deg); -o-transform:rotate(180deg); transform:rotate(180deg); }
	100% { -webkit-transform:rotate(360deg); -moz-transform:rotate(360deg); -ms-transform:rotate(360deg); -o-transform:rotate(360deg); transform:rotate(360deg); }
}
@-ms-keyframes rodaroda {
	0% { -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); -ms-transform:rotate(0deg); -o-transform:rotate(0deg); transform:rotate(0deg); }
	50% { -webkit-transform:rotate(180deg); -moz-transform:rotate(180deg); -ms-transform:rotate(180deg); -o-transform:rotate(180deg); transform:rotate(180deg); }
	100% { -webkit-transform:rotate(360deg); -moz-transform:rotate(360deg); -ms-transform:rotate(360deg); -o-transform:rotate(360deg); transform:rotate(360deg); }
}
@-o-keyframes rodaroda {
	0% { -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); -ms-transform:rotate(0deg); -o-transform:rotate(0deg); transform:rotate(0deg); }
	50% { -webkit-transform:rotate(180deg); -moz-transform:rotate(180deg); -ms-transform:rotate(180deg); -o-transform:rotate(180deg); transform:rotate(180deg); }
	100% { -webkit-transform:rotate(360deg); -moz-transform:rotate(360deg); -ms-transform:rotate(360deg); -o-transform:rotate(360deg); transform:rotate(360deg); }
}
@keyframes rodaroda {
	0% { -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); -ms-transform:rotate(0deg); -o-transform:rotate(0deg); transform:rotate(0deg); }
	50% { -webkit-transform:rotate(180deg); -moz-transform:rotate(180deg); -ms-transform:rotate(180deg); -o-transform:rotate(180deg); transform:rotate(180deg); }
	100% { -webkit-transform:rotate(360deg); -moz-transform:rotate(360deg); -ms-transform:rotate(360deg); -o-transform:rotate(360deg); transform:rotate(360deg); }
}
<div class="logo_header">
  <img src="logo.png" alt="Logo Kw Desgign">
</div>

Browser other questions tagged css css3 css-transitions

You are not signed in. Login or sign up in order to post.