<div class="circle circle1"></div>
<div class="circle circle2"></div>
<div class="circle circle3"></div>
<br>
<div class="circle circle4"></div>
<div class="circle circle5"></div>

body {
  transform-style: preserve-3d;
}
.circle {
  border-radius: 50%;
  height: 80px;
  width:80px;
  display: inline-block;
  position: relative;
  border-width: 10px;
  border-style: solid;
}

.circle1 {
  border-color: red;
  transform: rotateY(-1deg);
}
.circle2 {
  border-color: blue;
  transform: rotateY(-1deg);
}
.circle3 {
  border-color: green;
  transform: rotateY(-1deg);
}
.circle4 {
  top: -60px;
  left: 53px;
  transform: rotateY(1deg);
}
.circle5 {
  top: -60px;
  left: 53px;
  border-color: gold;
  transform: rotateY(1deg);
}