Some simple css3 exercises

<Div id = "wrapper">
<Div class = "eye left">
<Div class = "ball"> </div>
</Div>
<Div class = "eye right">
<Div class = "ball"> </div>
</Div>
<Div class = "mouth"> </div>
</Div>

The css code is as follows:

*{
Margin: 0;
Padding: 0;
}
# Wrapper {
Width: 255px;
Height: 255px;
Position: relative;
Margin: 100px auto;
-Webkit-transform: rotate (-45deg );
-Moz-transform: rotate (-45deg );
-O-transform: rotate (-45deg );
-Ms-transform: rotate (-45deg );
Transform: rotate (-45deg );
}
. Eye {
Background: rgb (94,186, 44 );
Width: 30px;
Height: 30px;
Position: absolute;
Border: 60px solid rgb (94,186, 44 );
Border-radius: 160px;
}
. Left {
Background: transparent;
Left: 0;
Top: 0;
}
. Right {
Right: 0;
Top: 0;
}
. Right. ball {
Width: 30px;
Height: 30px;
Background: transparent;
Border: 20px solid # fff;
Position: absolute;
Top:-20px;
Left:-20px;
Border-radius: 160px;
}
. Mouth {
Width: 135px;
Height: 45px;
Border: 60px solid rgb (94,186, 44 );
Position: absolute;
Bottom: 0;
Z-index:-1;
Border-radius: 160px;
}

Preview effect: