CSS转换和转换：多维数据集的一侧未显示

时间：2016-12-30 20:22:51

标签： jquery css3 transitions

我正在尝试使用CSS3和jQuery构建一个3D立方体。有一排较小的图标（在立方体下方）与立方体每侧显示的较大图标进行交互。当“点击”较小的图标时，立方体将旋转并显示重合的较大图标。每一方都有效，除了“鸟”形象。 它不是坐在立方体的顶部，而是位于立方体所有侧面后面的中间。我已经逐行阅读了我的所有代码，无法解决这个问题。我错过了一些非常简单的事吗？谁能看到我错过的东西？谢谢。

http://codepen.io/treuther/pen/NdKPdR


var init = function() {
  var box = document.querySelector('#cube').children[0],
      showPanelButtons = document.querySelectorAll('#show-buttons input'),
      panelClassName = 'show-front',

      onButtonClick = function( event ){
        box.removeClassName( panelClassName );
        panelClassName = event.target.className;
        box.addClassName( panelClassName );
      };

  for (var i=0, len = showPanelButtons.length; i < len; i++) {
    showPanelButtons[i].addEventListener( 'click', onButtonClick, false);
  }
    
};
  
window.addEventListener( 'DOMContentLoaded', init, false);
#cube {
	width: 236px;
	height: 236px;
	position: relative;
	margin: 0 auto 40px;
	-webkit-perspective: 1000px;
	-moz-perspective: 1000px;
	-o-perspective: 1000px;
	perspective: 1000px;
}
#show-buttons {
	text-align:  center;	
}
#flip figure {
	display: block;
	position: absolute;
	width: 236px;
	height: 236px;
	border: 2px solid black;
}
#flip {
	width: 100%;
	height: 100%;
	position: absolute;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-transition: -webkit-transform 1s;
	-moz-transition: -moz-transform 1s;
	-o-transition: -o-transform 1s;
	transition: transform 1s;
}
#flip .front {
	-webkit-transform: translateZ(119px);
	-moz-transform: translateZ(119px);
	-o-transform: translateZ(119px);
	transform: translateZ(119px);
}
#flip .back {
	-webkit-transform: rotateX(-180deg) translateZ(119px);
	-moz-transform: rotateX(-180deg) translateZ(119px);
	-o-transform: rotateX(-180deg) translateZ(119px);
	transform: rotateX(-180deg) translateZ(119px);
}
#flip .right {
	-webkit-transform: rotateY(90deg) translateZ(119px);
	-moz-transform: rotateY(90deg) translateZ(119px);
	-o-transform: rotateY(90deg) translateZ(119px);
	transform: rotateY(90deg) translateZ(119px);
}
#flip .left {
	-webkit-transform: rotateY(-90deg) translateZ(119px);
	-moz-transform: rotateY(-90deg) translateZ(119px);
	-o-transform: rotateY(-90deg) translateZ(119px);
	transform: rotateY(-90deg) translateZ(119px);
}
#fip .top {
	-webkit-transform: rotateX(90deg) translateZ(119px);
	-moz-transform: rotateX(90deg) translateZ(119px);
	-o-transform: rotateX(90deg) translateZ(119px);
	transform: rotateX(90deg) translateZ(119px);
}
#flip .bottom {
	-webkit-transform: rotateX(-90deg) translateZ(119px);
	-moz-transform: rotateX(-90deg) translateZ(119px);
	-o-transform: rotateX(-90deg) translateZ(119px);
	transform: rotateX(-90deg) translateZ(119px);
}
#flip.show-front {
	-webkit-transform: translateZ(-119px);
	-moz-transform: translateZ(-119px);
	-ms-transform: translateZ(-119px);
	-o-transform: translateZ(-119px);
	transform: translateZ(-119px);
}
#flip.show-back {
	-webkit-transform: translateZ(-119px) rotateX(180deg);
	-moz-transform: translateZ(-119px) rotateX(180deg);
	-ms-transform: translateZ(-119px) rotateX(180deg);
	-o-transform: translateZ(-119px) rotateX(180deg);
	transform: translateZ(-119px) rotateX(180deg);
}
#flip.show-right {
	-webkit-transform: translateZ(-119px) rotateY(-90deg);
	-moz-transform: translateZ(-119px) rotateY(-90deg);
	-ms-transform: translateZ(-119px) rotateY(-90deg);
	-o-transform: translateZ(-119px) rotateY(-90deg);
	transform: translateZ(-119px) rotateY(-90deg);
}
#flip.show-left {
	-webkit-transform: translateZ(-119px) rotateY(90deg);
	-moz-transform: translateZ(-119px) rotateY(90deg);
	-ms-transform: translateZ(-119px) rotateY(90deg);
	-o-transform: translateZ(-119px) rotateY(90deg);
	transform: translateZ(-119px) rotateY(90deg);
}
#flip.show-top {
	-webkit-transform: translateZ(-119px) rotateX(-90deg);
	-moz-transform: translateZ(-119px) rotateX(-90deg);
	-ms-transform: translateZ(-119px) rotateX(-90deg);
	-o-transform: translateZ(-119px) rotateX(-90deg);
	transform: translateZ(-119px) rotateX(-90deg);
}
#flip.show-bottom {
	-webkit-transform: translateZ(-119px) rotateX(90deg);
	-moz-transform: translateZ(-119px) rotateX(90deg);
	-ms-transform: translateZ(-119px) rotateX(90deg);
	-o-transform: translateZ(-119px) rotateX(90deg);
	transform: translateZ(-119px) rotateX(90deg);
}
<section id="qualities">
  <div id="cube">
			<div id="flip" class="show-front">
				<figure class="front"><img src="http://res.cloudinary.com/tracyr/image/upload/v1483126307/hardWorking_xiuikr.png" width="236px" height="236px" title="Hard Workding"></figure>
				<figure class="back"><img src="http://res.cloudinary.com/tracyr/image/upload/v1483126300/manySkills_kr1ij3.png" width="236px" height="236px" title="Many Skills"></figure>
				<figure class="right"><img src="http://res.cloudinary.com/tracyr/image/upload/v1483126292/problemSolver_mbgoy7.png" width="236px" height="236px" title="Problem Solver"></figure>
				<figure class="left"><img src="http://res.cloudinary.com/tracyr/image/upload/v1483126281/teamPlayer_lgtva8.png" width="236px" height="236px" title="Team Player"></figure>
				<figure class="top"><img src="http://res.cloudinary.com/tracyr/image/upload/v1483126312/fullSoar_xp94ok.png" width="236px" height="236px" title="Full Soar"></figure>
				<figure class="bottom"><img src="http://res.cloudinary.com/tracyr/image/upload/v1483126320/awesome_ohm7j2.png" width="236px" height="236px" title="Awesome"></figure>
			</div>
		</div>
		<div id="flipOptions">
			<p id="show-buttons">
				<input type="image" src="http://res.cloudinary.com/tracyr/image/upload/v1483126390/hardWorkingIcon_ptrexm.png" width="102px" height="102px" class="show-front">
				<input type="image" src="http://res.cloudinary.com/tracyr/image/upload/v1483126375/manySkillsIcon_xps6jh.png" width="102px" height="102px" class="show-back">
				<input type="image" src="http://res.cloudinary.com/tracyr/image/upload/v1483126381/problemSolverIcon_vik48o.png" width="102px" height="102px" class="show-right">
				<input type="image" src="http://res.cloudinary.com/tracyr/image/upload/v1483126396/teamPlayerIcon_vyhg2z.png" width="102px" height="102px" class="show-left">
				<input type="image" src="http://res.cloudinary.com/tracyr/image/upload/v1483126368/fullSoarIcon_al07oh.png" width="102px" height="102px" class="show-top"> <!-- This is the only one not working.-->
				<input type="image" src="http://res.cloudinary.com/tracyr/image/upload/v1483126345/awesomeIcon_n1uh8t.png" width="102px" height="102px" class="show-bottom">
			</p>
		</div>
</section

HERE是Codepen，我不能让JS在Codepen中工作来复制轮换。

0 个答案:

没有答案
相关问题
最新问题