开心学习
当前位置：Web前端 > > 正文

css3经典动画效果（CSS3 3D位移translate效果实例介绍）

时间：2021-11-05 14:58:39类别：Web前端

css3经典动画效果

CSS3 3D位移translate效果实例介绍

本文实例为大家分享了CSS3 3D 位移translate效果实例，供大家参考，具体内容如下

效果图：

css3经典动画效果（CSS3 3D位移translate效果实例介绍）

示例代码：

  • XML/HTML Code复制内容到剪贴板
    1. <!DOCTYPE html>     
    2. <html lang="en">     
    3. <head>     
    4.     <meta charset="UTF-8">     
    5.     <title>3D位移的Demo</title>     
    6.     <style>     
    7.         #experiment {     
    8.             -webkit-perspective: 800;     
    9.             -webkit-perspective-origin: 50% 50%;     
    10.             -webkit-transform-style: -webkit-preserve-3d;     
    11.         }     
    12.         #block {     
    13.             width: 200px;     
    14.             height: 200px;     
    15.             background-color: pink;     
    16.             margin: 100px auto;     
    17.      
    18.             transition: background-color 1s;     
    19.             -webkit-transition: background-color 1s;     
    20.         }     
    21.         #block:hover {     
    22.             background-color: purple;     
    23.         }     
    24.         #op {     
    25.             text-align: center;     
    26.         }     
    27.         #op input {     
    28.             width: 800px;     
    29.         }     
    30.     </style>     
    31.     <script>     
    32.         function translateall() {     
    33.             var x = document.getElementById("translateX").value;     
    34.             var y = document.getElementById("translateY").value;     
    35.             var z = document.getElementById("translateZ").value;     
    36.             document.getElementById("block").style.webkitTransform = "translate3d(" + x + "px," + y + "px," + z + "px)";     
    37.      
    38.             document.getElementById("translatex-span").innerText = x;     
    39.             document.getElementById("translatey-span").innerText = y;     
    40.             document.getElementById("translatez-span").innerText = z;     
    41.         }     
    42.     </script>     
    43. </head>     
    44. <body>     
    45.     <li id="experiment">     
    46.         <li id="block">     
    47.      
    48.         </li>     
    49.     </li>     
    50.     <li id="op">     
    51.         <p>translate x: <span id="translatex-span">0</span>px</p>     
    52.         <input type="range" min="-360" max="360" id="translateX" value="0" class="range-control" onmousemove="translateall()"/><br/>     
    53.         <p>translate y: <span id="translatey-span">0</span>px</p>     
    54.         <input type="range" min="-360" max="360" id="translateY" value="0" class="range-control" onmousemove="translateall()"/><br/>     
    55.         <p>translate z: <span id="translatez-span">0</span>px</p>     
    56.         <input type="range" min="-360" max="360" id="translateZ" value="0" class="range-control" onmousemove="translateall()"/><br/>     
    57.     </li>     
    58. </body>     
    59. </html>    

    • 以上就是本文的全部内容，希望对大家的学习有所帮助。

    标签：
    位移 Translate CSS3 3d
    上一篇下一篇

    猜您喜欢

    热门推荐

    © 2021 开心学习