白云c4、c5的位置控制不了，为什么用translate不行？

*{

margin: 0;

padding: 0;

border: none;

width: 100%;

height:100%;

}

/*蓝天部分*/

.sky{

    width:100%;

    height:60%;

    background: -webkit-linear-gradient(rgb(196, 228, 253,1),rgb(196, 228, 253,0));

}

/*白云整体部分*/

.sky>.cloud{

width: 200px;

height: 70px;

background-color: #FFFFFF;

border-radius: 50px;

position: relative;

top: 50px;

left: 300px;

}

.sky>.cloud::before{

content: "";

    width: 120px;

    height: 120px;

    background-color: #FFFFFF;

border-radius: 50%;

position: absolute;

left: 70px;

    top: -40px;

}

.sky>.cloud::after{

    content: "";

    width: 120px;

    height: 85px;

    background-color: #FFFFFF;

border-radius: 80%;

position: absolute;

left: 3px;

    top: -10px;

    -webkit-transform: rotate(45deg);

}

.sky>.c2{

-webkit-transform: translate(250px) scale(1.2);

}

.sky>.c3{

    -webkit-transform: translate(100px,60px) scale(1);

}

.sky>.c4{

-webkit-transform: translate(450px,10px) scale(0.7);

}

.sky>.c5{

-webkit-transform: translate(700px,10px) scale(0.8);

}

.grasslands{

width:100%;

height: 40%;

background: -webkit-linear-gradient(rgb(148, 190, 89,0),rgb(148, 190, 89,1));

                   }