<div class="wrap">
<div class="box">
<div class="ball"></div>
</div>
</div>
<div class="wrap">
<div class="box">
<div class="ball translate"></div>
</div>
</div>
<div class="wrap">
<div class="box">
<div class="ball scale"></div>
</div>
</div>
<div class="wrap">
<div class="box">
<div class="ball skew"></div>
</div>
</div>
<div class="wrap">
<div class="box">
<div class="sqaure rotate"></div>
</div>
</div>
.wrap {
border: 1px solid #000;
margin: 20px;
}
div{
display: inline-block;
}
.box {
width: 200px;
height: 200px;
background-color: cornflowerblue;
}
.ball {
width: 100px;
height: 100px;
position: relative;
top: 50px;
left: 50px;
border-radius: 100px;
background-color: aliceblue;
}
.sqaure{
width: 100px;
height: 100px;
position: relative;
top: 50px;
left: 50px;
background-color: aliceblue;
}
.translate {
transform: translate(40px, 20px);
}
.scale{
transform: scale(2,1);
}
.skew{
transform: skew(45deg, 30deg);
}
.rotate{
transform: rotate(70deg);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.