问如何在css js中使用云转换场景

EN

:root {
   --height: 100px;
   --width: 200px;
}

.cloud {
   transition-timing-function: ease-in;
   transition: all 2s;
   background: white;
   opacity: 0.3;
   border-radius:14px;
   width: var(--width);
   height: var(--height);
   position: fixed;
   top: calc(50vh - (var(--width) / 2) );
   left: calc(50vw - (var(--height) / 2) );
}
.wrap {
background: skyblue;
width: 100vw;
height: 100vh;
padding: 0px;
top:0px;
left:0px;
}

.wrap:hover #cloud1 {   
    top: calc(0px - (var(--width) / 2));
}
.wrap:hover #cloud2 {   
    left: calc(0px - (var(--height) / 2));
}
.wrap:hover #cloud3 {   
    left: calc(0px - (var(--width) / 2));
    top: calc(0px - (var(--height) / 2));
}
.wrap:hover #cloud4 {   
    left: calc(100vw - (var(--width) / 2));
    top: calc(100vh - (var(--width) / 2));
}
.wrap:hover #cloud5 {   
    top: calc(100vh - (var(--width) / 2));
}
.wrap:hover #cloud6 {   
    left: calc(100vw - (var(--width) / 2));
}

<div class="wrap">
<div class="cloud" id="cloud3">

</div>
<div class="cloud" id="cloud2">

</div>
<div class="cloud" id="cloud1">

</div>
<div class="cloud" id="cloud4">

</div>
<div class="cloud" id="cloud5">

</div>
<div class="cloud" id="cloud6">

</div>
</div>