Image Rotation with CSS

Question

Image Rotation with CSS

Navigation

#1 by (2 votes)
#2 by (0 votes)

0

<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

asked by anonymous 19.05.2016 / 21:30

2 answers

0

If you want to make the logo run, use it 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>

19.05.2016 / 21:53

Open () method of undefined FPDF Pass PHP array via Jquery

score 2 · Accepted Answer

2

The css call is wrong ...

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

19.05.2016 / 21:38