How to create spin effect using HTML & CSS?

Question

I needed spinning effect on hover of that square, what i can get is written below.

HTML

<div class="mainSquare">
  <div class="firstInnerSquare">
    <div class="lastInnerSquare">
      Hello
    </div>
  </div>
</div>

CSS

.mainSquare{
  width:160px;
  height:160px;
  background:black;
  margin: 50px auto;
  padding:25px;
}
.firstInnerSquare{
  width:110px;
  height:110px;
  background:red;
  padding:25px;
}
.lastInnerSquare{
  text-align:center;
  width:110px;
  padding: 46px 0px;
  background:white;
}

Fiddle

Hope to get help.

It is expected that you at least attempt to code this for yourself. Stack Overflow is not a code writing service. I would suggest that you do some additional research, either via Google or by searching SO, make an attempt and. if you still have trouble, come back with your code and explain what you have tried and why it did not work. — Paulie_D
– Paulie_D, Commented Apr 9, 2016 at 11:07

Harry · Accepted Answer · 2016-04-09 11:21:28Z

10

You can do this by using a single element and two pseudos. Make the 2 pseudo elements larger than the container element, position them behind the container and add a rotate animation to them.

Note: This is only a base sample that would help you get started. I would leave the fine tuning part for you to handle. You can read more about the CSS animation properties in this MDN page.

.shape {
  position: relative; /* used to position the pseudos relative to the parent */
  height: 100px;
  width: 100px;
  background: white;
  border: 1px solid;
  margin: 100px; /* required because children are larger than parent */
}
.shape:after,
.shape:before {
  position: absolute;
  content: '';
}
.shape:before {
  height: 125%; /* make one pseudo 25% larger than parent */
  width: 125%;
  top: -12.5%; /* 25/2 to make sure its center is same as the parent's */
  left: -12.5%; /* 25/2 to make sure its center is same as the parent's */
  background: red;
  z-index: -1; /* send it behind the parent */
}
.shape:after {
  height: 150%; /* make this pseudo larger than the parent and the other pseudo */
  width: 150%;
  top: -25%; /* 50/2 to make sure its center is same as the parent's */
  left: -25%; /* 50/2 to make sure its center is same as the parent's */
  background: black;
  z-index: -2; /* send it behind both the parent and other pseudo */
}

/* add animation when hovering on parent */
.shape:hover:before { 
  animation: rotate 3s linear infinite;
}
.shape:hover:after {
  animation: rotate-rev 3s linear infinite;
}
@keyframes rotate {
  to {
    transform: rotate(359deg); /* some browsers don't display spin when it is 360 deg */
  }
}
@keyframes rotate-rev {
  to {
    transform: rotate(-359deg); /* reverse direction rotate */
  }
}

<div class='shape'></div>

edited Apr 9, 2016 at 11:21

answered Apr 9, 2016 at 11:10

Harry

90.1k26 gold badges216 silver badges224 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Harry Over a year ago

@kishore.k.vaishnav: You can slow down the spin by increasing the animation-duration. After seeing your comment under the question, I'd recommend you to go through this MDN page on animations.

Paulie_D · Accepted Answer · 2016-04-09 11:56:55Z

6

Here's one with the original structure and just one keyframe statement:

All that needs changing, per div, is the animation duration and direction. The "middle" div's timing needs to be 50% of the outer/inner.

.mainSquare {
  width: 160px;
  height: 160px;
  background: black;
  margin: 50px auto;
  padding: 25px;
  animation: spin 2s infinite linear;
}
.firstInnerSquare {
  width: 110px;
  height: 110px;
  background: red;
  padding: 25px;
  animation: spin 1s infinite linear reverse;
}
.lastInnerSquare {
  text-align: center;
  width: 110px;
  padding: 46px 0px;
  background: white;
  animation: spin 2s infinite linear;
}
@keyframes spin {
  to {
    transform: rotate(1turn);
  }
}

<div class="mainSquare">
  <div class="firstInnerSquare">
    <div class="lastInnerSquare">
      Hello
    </div>
  </div>
</div>

edited Apr 9, 2016 at 11:56

answered Apr 9, 2016 at 11:43

Paulie_D

116k13 gold badges168 silver badges185 bronze badges

1 Comment

Harry Over a year ago

Nice one. This just needs one keyframe :)

Collectives™ on Stack Overflow

How to create spin effect using HTML & CSS?

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related