A Pen by keremciu.

Colorful-box---CSS3-Trick.markdown

Colorful box - CSS3 Trick

It has one color but animation is colorful. How did it happen? Click and see it.

A Pen by keremciu on CodePen.

License.

index.html

<p>Let's hover box</p>
<a class="box">Box</a>

script.js

/*

This is a CSS3 Trick for your buttons, boxes.
@keremciu

* Box has one color but animation is colorful!

- translateZ(0) value, need for retina displays. Don't forget it.

-------------------------------------
Also I used it this:
http://keremciu.com/connect
hover the social icons and see animation.


*/

style.css

body {
  font-family: Helvetica,Helvetica Neue,Arial;
}
p {
  text-align:center;
  color:#999;
}
.box {
  margin:0 auto;
  height:200px;
  width:200px;
  background:#EE3522;
  display:block;
  text-align:center;
  line-height:200px;
  color:white;
  font-size:36px;
  -webkit-transition:0.5s ease-out;-moz-transition: 0.5s ease-out;-o-transition: 0.5s ease-out;-ms-transition: 0.5s ease-out;transition:0.5s ease-out;
  border-radius:40%;
}

.box:hover {
  -webkit-transform: translateZ(0) rotate(360deg);-webkit-filter: hue-rotate(360deg);transform: translateZ(0) rotate(360deg);
  border-radius:100%;
}