예제 소스 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로 조정합니다. */ }