用于移动图像和 div 的 CSS3 动画

Question

我是 CSS3 动画的新手，在尝试创建幻灯片菜单时遇到了一个小问题。

我有以下 HTML 代码:

<div id="greenPart">
    <input type="checkbox" id="hackyCheckBox">
    <label for="hackyCheckBox">
        <img class="test" src="http://www.vectortemplates.com/raster/batman-logo-big.gif">
    </label>
</div>

和这个 CSS 代码:

#hackyCheckBox{display: none;}

.test{
    height: 30px;
    width: 50px;
}

#greenPart{height: 100px; width: 300px; background-color: green;}

.test, #greenPart{
    -webkit-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -ms-transition-duration: 1s;
    -o-transition-duration: 1s;
    transition-duration: 1s;

    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -ms-transition-property: -ms-transform;
    -o-transition-property: -o-transform;
    transition-property: transform;
}

#hackyCheckBox:checked + label img.test{
    transform:         translate(160px,0px); /* CSS3 */
    -moz-transform:    translate(160px,0px); /* Firefox */
    -webkit-transform: translate(160px,0px); /* Webkit */
    -o-transform:      translate(160px,0px); /* Opera */
    -ms-transform:     translate(160px,0px); /* IE 9 */
}

我的问题是当我点击 bat 侠标志时，只有标志移动，div 没有移动。如果它可以帮助您，这里是 jsfiddle:http://jsfiddle.net/1yLqzyjf/2/

Answer 1

将 div#greenPart 和 img 元素移到 label 中并为此使用适当的选择器 --> #hackyCheckBox:checked + 标签 div#greenPart。

#hackyCheckBox {
  display: none;
}
.test {
  height: 30px;
  width: 50px;
}
#greenPart {
  height: 100px;
  width: 300px;
  background-color: green;
}
.test,
#greenPart {
  -webkit-transition-duration: 1s;
  -moz-transition-duration: 1s;
  -ms-transition-duration: 1s;
  -o-transition-duration: 1s;
  transition-duration: 1s;
  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  -ms-transition-property: -ms-transform;
  -o-transition-property: -o-transform;
  transition-property: transform;
}
#hackyCheckBox:checked + label div#greenPart {
  -webkit-transform: translate(160px, 0px);
  -ms-transform: translate(160px, 0px);
  transform: translate(160px, 0px);
}

<input type="checkbox" id="hackyCheckBox">
<label for="hackyCheckBox">
  <div id="greenPart">
    <img class="test" src="http://www.vectortemplates.com/raster/batman-logo-big.gif" />
  </div>
</label>