您现在的位置是：网站首页> 编程资料编程资料

CSS3 3D位移translate效果实例介绍 _css3_CSS_网页制作_

2023-11-11 346人已围观

简介 这篇文章主要为大家详细介绍了CSS3 3D 位移translate效果实例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

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

效果图：

示例代码：

XML/HTML Code复制内容到剪贴板
  1. >     
  2. <html lang="en">     
  3. <head>     
  4.     <meta charset="UTF-8">     
  5.     <title>3D位移的Demotitle>     
  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.     <div id="experiment">     
  46.         <div id="block">     
  47.      
  48.         div>     
  49.     div>     
  50.     <div id="op">     
  51.         <p>translate x: <span id="translatex-span">0span>pxp>     
  52.    

    上一篇：四种CSS常用的选择器使用方法和注意事项_CSS教程_CSS_网页制作_

    下一篇：网页中时光轴CSS实现_CSS教程_CSS_网页制作_

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网