CSS3 3D位移translate效果实例介绍
示例代码:
XML/HTML Code复制内容到剪贴板
<!DOCTYPE html> <html lang="en"> <head> <meta charset="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: 100px auto;
transition: background-color 1s; -webkit-transition: background-color 1s; } #block:hover { background-color: purple; } #op { text-align: center; } #op input { width: 800px; } </style> <script> function translateall() { var x = document.getElementById("translateX").value; var y = document.getElementById("translateY").value; var z = document.getElementById("translateZ").value; (编辑:焦作站长网) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |