本文实例为大家分享了CSS3 3D 位移translate效果实例，供大家参考，具体内容如下
效果图：
示例代码：
XML/HTML Code复制内容到剪贴板
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>3D位移的Demo</title><style>#experiment{-webkit-perspective:800;-webkit-perspective-origin:50%50%;-webkit-transform-style:-webkit-preserve-3d;}#block{width:200px;height:200px;background-color:pink;margin:100pxauto;transition:background-color1s;-webkit-transition:background-color1s;}#block:hover{background-color:purple;}#op{text-align:center;}#opinput{width:800px;}</style><script>functiontranslateall(){varx=document.getElementById("translateX").value;vary=document.getElementById("translateY").value;varz=document.getElementById("translateZ").value;document.getElementById("block").style.webkitTransform="translate3d("+x+"px,"+y+"px,"+z+"px)";document.getElementById("translatex-span").innerText=x;document.getElementById("translatey-span").innerText=y;document.getElementById("translatez-span").innerText=z;}</script></head><body><divid="experiment"><divid="block"></div></div><divid="op"><p>translatex:<spanid="translatex-span">0</span>px</p><inputtype="range"min="-360"max="360"id="translateX"value="0"class="range-control"onmousemove="translateall()"/><br/><p>translatey:<spanid="translatey-span">0</span>px</p><inputtype="range"min="-360"max="360"id="translateY"value="0"class="range-control"onmousemove="translateall()"/><br/><p>translatez:<spanid="translatez-span">0</span>px</p><inputtype="range"min="-360"max="360"id="translateZ"value="0"class="range-control"onmousemove="translateall()"/><br/></div></body></html>以上就是本文的全部内容，希望对大家的学习有所帮助。
