Rotating Octagon Shape when Cursor is Hovered – Stunning CSS

thumbnail

In this tutorial, we will rotating octagon shape when cursor is hovered in CSS. We will create octagon shape with color white for the background and red color for the border. The width and height of 100px and 241px, respectively.

Example 1: The CSS for octagon shape with border is shown below

.oct {
  height: 241px;
  width: 100px;
  background: none;
  position: relative;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-top: 10px solid tomato;
  border-bottom: 10px solid tomato;
  margin: 100px auto;
  transition: all 0.8s;
}
.oct:before,
.oct:after,
.oct span {
  content: "";
  position: absolute;
  height: inherit;
  width: inherit;
  background: inherit;
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
  border: inherit;
  top: -10px;
  z-index:-1;
}
.oct:before {
  left: -100%;
  transform: rotate(-45deg);
  transform-origin: top right;
}
.oct:after {
  left: 100%;
  transform: rotate(45deg);
  transform-origin: top left;
}
.oct span {
  height: inherit;
  width: inherit;
  background: inherit;
  transform: rotate(90deg);
}
.oct:hover {
  transform: rotate(180deg);
}

For the full code HTML and CSS, you can use the below code:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.oct {
  height: 241px;
  width: 100px;
  background: none;
  position: relative;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-top: 10px solid tomato;
  border-bottom: 10px solid tomato;
  margin: 100px auto;
  transition: all 0.8s;
}
.oct:before,
.oct:after,
.oct span {
  content: "";
  position: absolute;
  height: inherit;
  width: inherit;
  background: inherit;
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
  border: inherit;
  top: -10px;
  z-index:-1;
}
.oct:before {
  left: -100%;
  transform: rotate(-45deg);
  transform-origin: top right;
}
.oct:after {
  left: 100%;
  transform: rotate(45deg);
  transform-origin: top left;
}
.oct span {
  height: inherit;
  width: inherit;
  background: inherit;
  transform: rotate(90deg);
}
.oct:hover {
  transform: rotate(180deg);
}
</style>
</head>
<body>
 
<h2 style="text-align: center;">Example Rotating Octagon Shape when Cursor is Hovered - Stunning CSS </h2>
<div class="oct">
  <span></span>
</div>
 
</body>
</html>

When you open it in the browser, the result will be:

Back To Top