Css Transform and Translate

by Venkatesh Dematti

HTML

<div class="container"></div>

CSS

.container{
  width:100px;
  height:100px;
  background:Slategrey;
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  transition:all 0.5s ease;
  transform:rotate(45deg);
   
  box-sizing:border-box;

}
.container:hover{
  border-bottom-left-radius:50%;
  border-top-right-radius:50%;
  border-bottom-right-radius:50%;
  cursor:pointer;
   border-left:10px solid red;
   border-top:10px solid red;
  background:#000;
}