How do I animate a square around a block? - css

Question

My animation works but after one turn, the square rotate of 45 deg,
I don't understand why.
https://codepen.io/igamanstudio/pen/ZPYWWO
.card {
/* Add shadows to create the "card" effect */
position: relative;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
transition: 0.3s;
width: 300px;
height: 300px;
margin: 150px auto;
}
.anim-square {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
animation: spin 20s linear infinite;
}
.losange-wrap {
position: relative;
}
.losange-1 {
position: absolute;
overflow: hidden;
top: -15px;
left: -15px;
width: 30px;
height: 30px;
transform: rotate(45deg);
transform-origin: center;
background: red;
border: 2px solid blue;
animation: invert-spin 22.5s linear infinite;
}
.losange-1 .img {
position: relative;
width: 30px;
height: 30px;
}
.losange-1 .img:before {
position: absolute;
content: '';
display: block;
z-index: 999;
top: -15px;
left: -15px;
width: 60px;
height: 60px;
background: url("https://loremflickr.com/60/60/girl/all") center center;
transform: rotate(-45deg);
transform-origin: center;
}
/* On mouse-over, add a deeper shadow */
.card:hover {
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}
/* Add some padding inside the card container */
.container {
padding: 2px 16px;
}
#keyframes spin {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes invert-spin {
100% {
-webkit-transform: rotate(-360deg);
transform: rotate(-360deg);
}
}
<div class="card">
<img src="http://placekitten.com/300/200" alt="Avatar" style="width:100%">
<div class="container">
<h4><b>John Doe</b></h4>
<p>Architect & Engineer</p>
</div>
<div class="anim-square">
<div class="losange-wrap">
<div class="losange-1">
<div class="img"></div>
</div>
</div>
</div>
</div>
transform: rotate(45deg);
transform-origin: center;
background: red ;
border: 2px solid blue;
animation: invert-spin 22.5s linear infinite;

Answer 1

First you need to set the same duration for both animation then you need to use rotate(-315deg) for the image since you are setting rotate(45deg). The difference should be 360deg like the main container that will animate from 0deg to 360deg
.card {
/* Add shadows to create the "card" effect */
position: relative;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
transition: 0.3s;
width: 300px;
height: 300px;
margin: 150px auto;
}
.anim-square {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
//background: rgba(0,0,0,0.3);
animation: spin 5s linear infinite;
}
.losange-wrap {
position: relative;
}
.losange-1 {
position: absolute;
overflow: hidden;
top: -15px;
left: -15px;
width: 30px;
height: 30px;
transform: rotate(45deg);
transform-origin: center;
background: red;
border: 2px solid blue;
animation: invert-spin 5s linear infinite;
}
.losange-1 .img {
position: relative;
width: 30px;
height: 30px;
}
.losange-1 .img:before {
position: absolute;
content: '';
display: block;
z-index: 999;
top: -15px;
left: -15px;
width: 60px;
height: 60px;
background: url('https://loremflickr.com/60/60/girl/all') center center;
transform: rotate(-45deg);
transform-origin: center;
}
/* On mouse-over, add a deeper shadow */
.card:hover {
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}
/* Add some padding inside the card container */
.container {
padding: 2px 16px;
}
#keyframes spin {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes invert-spin {
100% {
-webkit-transform: rotate(-315deg);
transform: rotate(-315deg);
}
}
<div class="card">
<img src="http://placekitten.com/300/200" alt="Avatar" style="width:100%">
<div class="container">
<h4><b>John Doe</b></h4>
<p>Architect & Engineer</p>
</div>
<div class="anim-square">
<div class="losange-wrap">
<div class="losange-1">
<div class="img"></div>
</div>
</div>
</div>
</div>