本文实例为大家分享了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>
以上就是本文的全部内容，希望对大家的学习有所帮助。