Эксперименты с CSS

Приветствую вас, уважаемые обитатели форума!

По наводке Fell-x27 Полез в анимации CSS 3.
Ибо jQuery конечно хорош, но не всегда уместен.

Внимание! Слабонервным дальше не читать, ибо вопрос, возможно, глупый!

Возник вопрос, можно ли с помощью CSS сделать блок задвигающийся за пределы экрана по нажатию.
Видел конструкции с вложенными селекторами и подумал "Будет так работать или нет" (так, как ниже).
Пытаюсь сделать так:

HTML:

1.  
2. <div id="chbxCont">
3.      
4.             <input type="checkbox" id="chbx" />
5.      
6. </div>
7.  

Код (CSS):

1. #chbx:checked {
2.     #chbxCont {margin-left:-150px;}
3. }

Если прокатит, то можно сделать label и дальше думаю не надо объяснять как это работает))

Заранее благодарю за терпимость.

 

Изначальная задумка предполагала, что останется краешек, кликнув по которому можно будет его потом выдвинуть обратно.
Но всё равно большое спасибо за новые знания. За это время пришла в голову еще одна мысль, ща проверю и выложу...

 

В общем, сырая версия выглядит вот так:

HTML:

1.  
2. <label id="chbxCont"><input type="checkbox" id="chbx" /> Здесь могла быть Ваша реклама</label>
3.  

Код (CSS):

1. #chbxCont {
2.  
3. padding:5px;
4. border:1px solid #ffaaaa;
5. margin:10px 10px 10px 0px;
6. background-color:#ffffff;
7.  
8.  
9. }
10.  
11. #chbx {
12.  
13. transition:1s;
14.  
15. }
16.  
17. #chbx:checked {
18.  
19. margin-left:-200px;
20.  
21. }

Остается только спрятать сам чек бокс.

А теперь можно почитать критику ибо это использование не по назначению.
Но ИМХО выглядит интересно...