脚本之家 服务器常用软件
快捷导航
您的位置：主页 > 网页制作 > CSS > css3 >

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

  发布时间：2016-05-03 16:22:42   作者：佚名   我要评论
这篇文章主要为大家详细介绍了CSS3 3D 位移translate效果实例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了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.     <div id="experiment">     
  46.         <div id="block">     
  47.      
  48.         </div>     
  49.     </div>     
  50.     <div 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.     </div>     
  58. </body>     
  59. </html>    

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

相关文章

  • 浅析CSS3 中的 transition，transform，translate之间区别和作用

    这篇文章主要介绍了CSS3 中的 transition，transform，translate之间区别和作用，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下
    2020-03-26

  • css3 中translate和transition的使用方法

    这篇文章主要介绍了css3 中translate和transition的使用方法,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
    2020-03-26

  • CSS3 translate导致字体模糊的实例代码

    这篇文章主要介绍了CSS3 translate导致字体模糊的实例代码，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧
    2019-08-30

  • 利用css3 translate完美实现表头固定效果

    这篇文章主要介绍了利用css3 translate完美实现表头固定效果的相关资料，文中通过示例代码介绍的很详细，相信对大家具有一定的参考价值，需要的朋友们下面来一起看看吧。
    2017-02-28

  • CSS3实现水平居中、垂直居中、水平垂直居中的实例代码

    在前端面试中经常会遇到css居中效果的实现，今天小编给大家分享几种css垂直水平居中的方法，通过实例代码给大家讲解，需要的朋友参考下吧
    2020-02-27

  • css常用元素水平垂直居中方案

    这篇文章主要介绍了css常用元素水平垂直居中方案,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习
    2019-08-09

  • CSS水平垂直居中解决方案(6种)

    这篇文章主要介绍了CSS水平垂直居中解决方案(6种)的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-02-10

  • css实现元素水平垂直居中常见的两种方式实例详解

    这篇文章主要给大家介绍了css实现元素水平垂直居中的两种方式，文中给出了完整的示例代码供大家参考学习，对大家的学习或者工作具有一定的参考价值，有需要的朋友们下面来
    2017-04-23

  • CSS水平垂直居中的几种方法总结

    这篇文章主要介绍了CSS水平垂直居中的几种方法总结,垂直居中是布局中十分常见的效果之一,本文介绍了几种方法，有兴趣的可以了解一下。
    2016-12-19

  • css让容器水平垂直居中的7种方式

    这篇文章主要为大家详细介绍了css让容器水平垂直居中的7种方式,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-10-17

最新评论

关注微信公众号

扫一扫