首页
所有分类
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 相关文章推荐
CSS3中Transform动画属性用法详解
Jul 04 HTML / CSS
全面解析CSS Media媒体查询使用操作（推荐）
Aug 15 HTML / CSS
CSS3实现网站商品展示效果图
Jan 18 HTML / CSS
HTML+CSS3+JS 实现的下拉菜单
Nov 25 HTML / CSS
HTML5 对各个标签的定义与规定：body的介绍
Jun 21 HTML / CSS
HTML5 语音搜索只需一句代码
Jan 03 HTML / CSS
HTML5 window/iframe跨域传递消息 API介绍
Aug 26 HTML / CSS
让IE9以下版本的浏览器兼容HTML5的方法
Mar 12 HTML / CSS
让ie浏览器成为支持html5的浏览器的解决方法(使用html5shiv)
Apr 08 HTML / CSS
HTML5 Canvas中绘制矩形实例
Jan 01 HTML / CSS
鼠标滚轮事件和Mac触控板双指事件
Dec 23 HTML / CSS
Html5页面上如何禁止手机虚拟键盘弹出
Mar 19 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
德生2P3(1) update(2) 备份(2) 索引(8) python小游戏(5) SnakeGame(1) 索尼ICF-36(1) 数据库卡死(1) 全局锁(1) 贪吃蛇(2)
You might like
PHP教程 基本语法
2009/10/23 PHP
PHP 字符串加密函数(在指定时间内加密还原字符串，超时无法还原)
2010/04/28 PHP
php运行提示：Fatal error Allowed memory size内存不足的解决方法
2014/12/17 PHP
php生成二维码
2015/08/10 PHP
浅谈PHP中的错误处理和异常处理
2017/02/04 PHP
PDO::errorInfo讲解
2019/01/28 PHP
Js的MessageBox
2006/12/03 Javascript
关于javascript中this关键字(翻译+自我理解)
2010/10/20 Javascript
从零开始学习jQuery (四) jQuery中操作元素的属性与样式
2011/02/23 Javascript
javascript判断office版本示例
2014/04/11 Javascript
jQuery如何将选中的对象转化为原始的DOM对象
2014/06/09 Javascript
JS实现进入页面时渐变背景色的方法
2015/02/25 Javascript
JavaScript获得当前网页来源页面（即上一页）的方法
2015/04/03 Javascript
Javascript函数式编程简单介绍
2015/10/11 Javascript
jQuery实现下拉框功能实例代码
2016/05/06 Javascript
全面解析Bootstrap中tooltip、popover的使用方法
2016/06/13 Javascript
一个简单不报错的summernote 图片上传案例
2016/07/11 Javascript
瀑布流的实现方式（原生js+jquery+css3）
2020/06/28 Javascript
vue v-model表单控件绑定详解
2017/05/17 Javascript
激动人心的 Angular HttpClient的源码解析
2017/07/10 Javascript
js实现一个简单的MVVM框架示例
2018/01/15 Javascript
Vue filter介绍及详细使用
2018/04/04 Javascript
微信小程序点击按钮动态切换input的disabled禁用/启用状态功能
2020/03/07 Javascript
Tornado服务器中绑定域名、虚拟主机的方法
2014/08/22 Python
Python连接DB2数据库
2016/08/27 Python
详解PyTorch手写数字识别(MNIST数据集)
2019/08/16 Python
英国高端食品和葡萄酒超市：Waitrose
2016/08/23 全球购物
英国安全产品购物网站：The Safe Shop
2017/03/20 全球购物
美国椅子和沙发制造商：La-Z-Boy
2020/10/25 全球购物
以下的初始化有什么区别
2013/12/16 面试题
说一下Linux下有关用户和组管理的命令
2016/01/04 面试题
系统管理员的职责包括那些？管理的对象是什么？
2013/01/18 面试题
颁奖晚会主持词
2014/03/25 职场文书
和解协议书
2014/04/16 职场文书
《圆明园的毁灭》教学反思
2016/02/16 职场文书
Pytorch GPU内存占用很高,但是利用率很低如何解决
2021/06/01 Python