더북(TheBook)

예제 소스 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로 조정합니다. */
}
신간 소식 구독하기
뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.