首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 HTML / CSS

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

Posted in HTML / CSS onMay 03, 2016

本文实例为大家分享了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 3D位移translate效果实例介绍

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

HTML / CSS 相关文章推荐
详解CSS样式中的 !important * _ 符号
Mar 09 HTML / CSS
css3简单练习实现遨游浏览器logo的绘制
Jan 30 HTML / CSS
纯HTML+CSS3制作导航菜单(附源码)
Apr 24 HTML / CSS
实现CSS3中的border-radius(边框圆角)示例代码
Jul 19 HTML / CSS
使用css3实现超炫的loading加载动画效果
May 07 HTML / CSS
如何用css3实现switch组件开关的方法
Feb 09 HTML / CSS
html+css3实现的登录界面
Dec 09 HTML / CSS
HTML5 Canvas实现文本对齐的方法总结
Mar 24 HTML / CSS
从零实现一个自定义html5播放器的示例代码
Aug 01 HTML / CSS
基于canvas的骨骼动画的示例代码
Jun 12 HTML / CSS
html5 外链式实现加减乘除的代码
Sep 04 HTML / CSS
从QQtabBar看css命名规范BEM的详细介绍
Aug 07 HTML / CSS
详解CSS的border边框属性及其在CSS3中的新特性
May 10 #HTML / CSS
CSS3中border-radius属性设定圆角的使用技巧
May 10 #HTML / CSS
CSS3使用多列制作瀑布流
May 10 #HTML / CSS
使用CSS3的rem属性制作响应式页面布局的要点解析
May 24 #HTML / CSS
深入解读CSS3中transform变换模型的渲染
May 27 #HTML / CSS
CSS3解决移动页面上点击链接触发色块的问题
Jun 03 #HTML / CSS
CSS3轻松实现清新 Loading 效果的简单实例
Jun 06 #HTML / CSS
vue-router-link(1) KVM(1) click(1) 本地化存储(1) 项目打包(2) 自定义组件(1) Yolov5(1) Jmerte(1) Storage(1) TimePickerView(1)
You might like
SONY ICF-SW7600的电路分析
2021/03/02 无线电
php编写简单的文章发布程序
2015/06/18 PHP
php简单实现多维数组排序的方法
2016/09/30 PHP
PHP实现的多维数组排序算法分析
2018/02/10 PHP
你的编程语言可以这样做吗？
2006/09/07 Javascript
[转]JS宝典学习笔记
2007/02/07 Javascript
nicejforms——美化表单不用愁
2007/02/20 Javascript
JavaScript 对象链式操作测试代码
2010/04/25 Javascript
javascript中判断一个值是否在数组中并没有直接使用
2012/12/17 Javascript
Javascript表格翻页效果实现思路及代码
2013/08/23 Javascript
jQuery判断一个元素是否可见的方法
2015/06/05 Javascript
JavaScript+CSS无限极分类效果完整实现方法
2015/12/22 Javascript
Javascript字符串拼接小技巧(推荐)
2016/06/02 Javascript
那些精彩的JavaScript代码片段
2017/01/12 Javascript
Javascript中的神器——Promise
2017/02/08 Javascript
js实现鼠标拖动功能
2017/03/20 Javascript
Javascript实现数组中的元素上下移动
2017/04/28 Javascript
JavaScript引用类型Object常见用法实例分析
2018/08/08 Javascript
[02:23]DOTA2英雄基础教程 幻影长矛手
2013/12/09 DOTA
Python通过PIL获取图片主要颜色并和颜色库进行对比的方法
2015/03/19 Python
Python实现查找匹配项作处理后再替换回去的方法
2017/06/10 Python
python利用正则表达式搜索单词示例代码
2017/09/24 Python
Python 查看list中是否含有某元素的方法
2018/06/27 Python
python路径的写法及目录的获取方式
2019/12/26 Python
python 中不同包 类 方法 之间的调用详解
2020/03/09 Python
jupyter notebook 使用过程中python莫名崩溃的原因及解决方式
2020/04/10 Python
Python selenium爬虫实现定时任务过程解析
2020/06/08 Python
SkinCeuticals官网：美国药妆品牌
2018/04/19 全球购物
EJB与JAVA BEAN的区别
2016/08/29 面试题
Ruby如何实现动态方法调用
2012/11/18 面试题
应届毕业生求职信范文分享
2013/12/26 职场文书
打架检讨书100字
2014/01/19 职场文书
一句话工作感言
2014/03/01 职场文书
公司经理任命书
2014/06/05 职场文书
优秀班组事迹材料
2014/12/24 职场文书
应届生们该怎么书写求职信？
2019/07/05 职场文书