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>    

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

HTML / CSS 相关文章推荐
css3 iphone玻璃透明气泡完美实现
Mar 20 HTML / CSS
CSS3中使用RGBA设置透明度的示例
Aug 04 HTML / CSS
详解CSS3的perspective属性设置3D变换距离的方法
May 23 HTML / CSS
CSS3实现文本垂直排列的方法
Jul 10 HTML / CSS
CSS3 3D酷炫立方体变换动画的实现
Mar 26 HTML / CSS
使用 CSS3 中@media 实现网页自适应的示例代码
Mar 24 HTML / CSS
html5的画布canvas——画出简单的矩形、三角形实例代码
Jun 09 HTML / CSS
html5图片上传预览示例分享
Apr 14 HTML / CSS
使用HTML5 Canvas API控制字体的显示与渲染的方法
Mar 24 HTML / CSS
amazeui 验证按钮扩展的实现
Aug 21 HTML / CSS
HTML5 drag和drop具体使用详解
Jan 18 HTML / CSS
td 内容自动换行 table表格td设置宽度后文字太多自动换行
Dec 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
You might like
我的论坛源代码(四)
2006/10/09 PHP
php的lavarel框架中join和orWhere的用法
2020/12/28 PHP
HTML node相关的一些资料整理
2010/01/01 Javascript
映彩衣的js随笔(js图片切换效果)
2011/07/31 Javascript
加载 Javascript 最佳实践
2011/10/30 Javascript
Javascript 闭包引起的IE内存泄露分析
2012/05/23 Javascript
ajax提交表单实现网页无刷新注册示例
2014/05/08 Javascript
jQuery中:submit选择器用法实例
2015/01/03 Javascript
快速解决js开发下拉框中blur与click冲突
2016/10/10 Javascript
DOM 事件的深入浅出(二)
2016/12/05 Javascript
详解nodejs 配置文件处理方案
2019/01/02 NodeJs
详解js常用分割取字符串的方法
2019/05/15 Javascript
Vue 实现html中根据类型显示内容
2019/10/28 Javascript
如何在Vue.JS中使用图标组件
2020/08/04 Javascript
浅谈JavaScript 声明提升
2020/09/14 Javascript
python访问sqlserver示例
2014/02/10 Python
Zookeeper接口kazoo实例解析
2018/01/22 Python
解决python opencv无法显示图片的问题
2018/10/28 Python
Python编程深度学习绘图库之matplotlib
2018/12/28 Python
Python通过递归获取目录下指定文件代码实例
2019/11/07 Python
Python实现名片管理系统
2020/02/14 Python
python实现飞船游戏的纵向移动
2020/04/24 Python
python 获取字典键值对的实现
2020/11/12 Python
html5 canvas 实现光线沿不规则路径运动
2020/04/20 HTML / CSS
什么叫应用程序域?什么是受管制的代码?什么是强类型系统?什么是装箱和拆箱?
2016/08/13 面试题
怎样客观的做好自我评价
2013/12/28 职场文书
安全生产责任书
2014/03/12 职场文书
2014年转正工作总结
2014/11/08 职场文书
2014年库房工作总结
2014/11/26 职场文书
2015年学校党支部工作总结
2015/04/01 职场文书
2015年大班保育员工作总结
2015/05/18 职场文书
财务人员入职担保书
2015/09/22 职场文书
初三化学教学反思
2016/02/22 职场文书
民事调解协议书
2016/03/21 职场文书
干货:如何写好观后感 !
2019/05/21 职场文书
centos7安装mysql5.7经验记录
2022/05/02 Servers