<div id="ploskost">
  <div id="div1">div1</div>
  <div id="div2">div2</div>
  <div id="div3">div3</div>
</div>

body{
  perspective: 300px;
  transform-style: preserve-3d; 
  transform: translate3d(0px, 0px, 0em) rotateX(30deg) rotateY(-60deg) rotateZ(0deg);
  transition: 0.5s;
}
#ploskost{
  width: 300px;
  height: 200px;
  border: 2px solid red;
  display: flex;
  background: rgb(238,174,202);
background: linear-gradient(0deg, rgba(238,174,202,0.5942752100840336) 0%, rgba(148,187,233,0.41220238095238093) 100%);
  transform-style: preserve-3d; 
  transform: rotate(5deg);
}
#div1,
#div2,
#div3{
  width: 70px;
  height: 70px;
  border: 2px solid green;
  background: #555;
  margin: 5px;
  color: #fff;
}
#div1{
  transform-origin: 100% 0%;
  transform: translate3d(0em, 0px, -1em) rotateX(0deg) rotateY(0deg) rotateZ(10deg);
}
#div2{
  transform-origin: 100% 0%;
  transform: translate3d(0em, 0px, -5em) rotateX(0deg) rotateY(0deg) rotateZ(20deg);
}
#div3{
  transform-origin: 100% 0%;
  transform: translate3d(0em, 0px, -8em) rotateX(0deg) rotateY(0deg) rotateZ(30deg);
}