首页
所有分类
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 相关文章推荐
image-set实现Retina屏幕下图片显示详细介绍
Dec 24 HTML / CSS
布局和排版教程 纯css3实现图片三角形排列
Oct 17 HTML / CSS
css3的动画特效之动画序列（animation）
Dec 22 HTML / CSS
HTML5中的Article和Section元素认识及使用
Mar 22 HTML / CSS
HTML5 canvas画图并保存成图片的jcanvas插件
Jan 17 HTML / CSS
让ie浏览器成为支持html5的浏览器的解决方法(使用html5shiv)
Apr 08 HTML / CSS
移动端解决悬浮层（悬浮header、footer）会遮挡住内容的3种方法
Mar 27 HTML / CSS
HTML5页面直接调用百度地图API获取当前位置直接导航目的地的实现代码
Mar 02 HTML / CSS
使用postMessage让 iframe自适应高度的方法示例
Oct 08 HTML / CSS
HTML5在微信内置浏览器下右上角菜单的调整字体导致页面显示错乱的问题
Jan 19 HTML / CSS
html5移动端禁止长按图片保存的实现
Apr 20 HTML / CSS
用position:sticky完美解决小程序吸顶问题的实现方法
Apr 24 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
口号(179) 担保书(46) 协议书(568) 任命书(51) 说明书(38) 意向书(73) 标语(336) 检举信(8) 委托书(259) 公证书(45)
You might like
php 团购折扣计算公式
2011/11/24 PHP
PHP简单读取PDF页数的实现方法
2016/07/21 PHP
PHP编程 SSO详细介绍及简单实例
2017/01/13 PHP
thinkPHP5实现数据库添加内容的方法
2017/10/25 PHP
YII2框架中日志的配置与使用方法实例分析
2020/03/18 PHP
javascript 对表格的行和列都能加亮显示
2008/12/26 Javascript
jQuery 插件 将this下的div轮番显示
2009/04/09 Javascript
点击文章内容处弹出页面代码
2009/10/01 Javascript
基于jquery打造的百分比动态色彩条插件
2012/09/19 Javascript
ECMAScript6--解构
2017/03/30 Javascript
JavaScript函数、闭包、原型、面向对象学习笔记
2018/09/06 Javascript
vue数据操作之点击事件实现num加减功能示例
2019/01/19 Javascript
jquery使用echarts实现有向图可视化功能示例
2019/11/25 jQuery
基于JS实现操作成功之后自动跳转页面
2020/09/25 Javascript
wepy--用vantUI 实现上弹列表并选择相应的值操作
2020/11/03 Javascript
python输出当前目录下index.html文件路径的方法
2015/04/28 Python
python更新列表的方法
2015/07/28 Python
Python 文件管理实例详解
2015/11/10 Python
Python+django实现文件下载
2016/01/17 Python
python字符串中的单双引
2017/02/16 Python
PyQt5实现无边框窗口的标题拖动和窗口缩放
2018/04/19 Python
使用Pandas的Series方法绘制图像教程
2019/12/04 Python
Python图片的横坐标汉字实例
2019/12/04 Python
sklearn+python:线性回归案例
2020/02/24 Python
opencv中图像叠加/图像融合/按位操作的实现
2020/04/01 Python
CSS 3.0 结合video视频实现的创意开幕效果
2020/06/01 HTML / CSS
Html5实现文件异步上传功能
2017/05/19 HTML / CSS
意大利会呼吸的鞋：Geox健乐士
2017/02/12 全球购物
英国珠宝钟表和家居礼品精品店：David Shuttle
2018/02/24 全球购物
李敖北大演讲稿
2014/05/24 职场文书
社区维稳工作方案
2014/06/06 职场文书
“六查”、“三学”、“三干”查摆问题整改措施
2014/09/27 职场文书
认错检讨书
2014/10/02 职场文书
九华山导游词
2015/02/03 职场文书
mysql分表之后如何平滑上线详解
2021/11/01 MySQL
SQL Server2019数据库备份与还原脚本，数据库可批量备份
2021/11/20 SQL Server