예제 소스 Exercise/13장/KidsGao/css/style.css
#farm3 .machineWrap .machine1 {
position: absolute; /* 기계를 3차원 특징으로 변경합니다. */
width: 586px;
height: 455px;
background-image: url(../img/farm/farm3/machine1.png);
z-index: 900; /* z축을 900으로 조정합니다. */
}
#farm3 .machineWrap .sawShadow {
position: absolute; /* 톱니바퀴 그림자를 3차원 특징으로 변경합니다. */
width: 95px;
height: 95px;
background-image: url(../img/farm/farm3/sawshadow.png);
margin: 145px 0 0 145px; /* 상단에서 145px, 왼쪽에서 145px 떨어진 지점에 배치합니다. */
}
#farm3 .machineWrap .saw1,
#farm3 .machineWrap .saw2 {
position: absolute; /* 톱니바퀴를 3차원 특징으로 변경합니다. */
width: 95px;
height: 95px;
background-image: url(../img/farm/farm3/saw.png);
}
#farm3 .machineWrap .saw1 {
margin: 140px 0 0 140px; /* 왼쪽 톱니바퀴를 상단에서 140px, 왼쪽에서 140px 떨어진 지점에 배치합니다. */
}
#farm3 .machineWrap .saw2 {
margin: 140px 0 0 350px; /* 오른쪽 톱니바퀴를 상단에서 140px, 왼쪽에서 350px 떨어진 지점에 배치합니다. */
}
#farm3 .machineWrap .timer {
position: absolute; /* 타이머를 3차원 특징으로 변경합니다. */
width: 103px;
height: 104px;
background-image: url(../img/farm/farm3/second.png);
margin: 125px 0 0 45px;
z-index: 999; /* z축을 999로 조정합니다. */
}
#farm3 .machineWrap .machineBird {
position: absolute; /* 새를 3차원 특징으로 변경합니다. */
width: 44px;
height: 49px;
background-image: url(../img/farm/farm3/machinebird.png);
margin: 220px 0 0 20px;
z-index: 999; /* z축을 999로 조정합니다. */
}