首页
所有分类
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实现字体颜色渐变的实现
Mar 09 HTML / CSS
CSS3 box-sizing属性
Apr 17 HTML / CSS
各大浏览器 CSS3 和 HTML5 兼容速查表 图文
Apr 01 HTML / CSS
CSS3 border-image详解、应用及jQuery插件
Aug 29 HTML / CSS
CSS伪类与CSS伪元素的区别及由来具体说明
Dec 07 HTML / CSS
CSS3的Flexbox布局的简明入门指南
Apr 08 HTML / CSS
CSS3中的Transition过度与Animation动画属性使用要点
May 20 HTML / CSS
用React加CSS3实现微信拆红包动画效果
Mar 13 HTML / CSS
HTML5之多线程(Web Worker)
Jan 02 HTML / CSS
浅谈Html5移动端ios/Android兼容性总结
Jun 01 HTML / CSS
CSS中Single Div 绘图技巧的实现
Jun 18 HTML / CSS
微信小程序纯CSS实现无限弹幕滚动效果
Sep 23 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
希腊购物网站(6) 白俄罗斯购物网站(3) 摩纳哥购物网站(1) 哈萨克斯坦购物网站(2) 罗马尼亚购物网站(10) 乌克兰购物网站(27) 约旦购物网站(1) 马耳他购物网站(1) 缅甸购物网站(1) 亚洲购物网站(6)
You might like
PHP7.1实现的AES与RSA加密操作示例
2018/06/15 PHP
JavaScript与Image加载事件(onload)、加载状态(complete)
2011/02/14 Javascript
面向对象设计模式的核心法则
2013/11/10 Javascript
document节点对象的获取方式示例介绍
2013/12/24 Javascript
js实现飞入星星特效代码
2014/10/17 Javascript
jQuery原生的动画效果
2015/07/10 Javascript
初步使用Node连接Mysql数据库
2016/03/03 Javascript
基于javascript实现样式清新图片轮播特效
2016/03/30 Javascript
好好了解一下Cookie(强烈推荐)
2016/06/14 Javascript
JavaScript &amp; jQuery完美判断图片是否加载完毕
2017/01/08 Javascript
Angular2使用Augury来调试Angular2程序
2017/05/21 Javascript
jQuery中过滤器的基本用法示例
2017/10/11 jQuery
详解jQuery获取特殊属性的值以及设置内容
2018/11/14 jQuery
Node.js net模块功能及事件监听用法分析
2019/01/05 Javascript
Vue中key的作用示例代码详解
2020/06/10 Javascript
[01:38]DOTA2 2015国际邀请赛中国区预选赛 Showopen
2015/06/01 DOTA
Python实现螺旋矩阵的填充算法示例
2017/12/28 Python
python3.4爬虫demo
2019/01/22 Python
Python数据分析模块pandas用法详解
2019/09/04 Python
python ftplib模块使用代码实例
2019/12/31 Python
python实现串口通信的示例代码
2020/02/10 Python
如何在windows下安装Pycham2020软件(方法步骤详解)
2020/05/03 Python
Python ADF 单位根检验 如何查看结果的实现
2020/06/03 Python
Python爬虫之Spider类用法简单介绍
2020/08/04 Python
Python爬虫之Selenium多窗口切换的实现
2020/12/04 Python
定义一结构体数组表示分数，并求两个分数相加之和
2013/06/11 面试题
语文教育专业推荐信范文
2013/11/25 职场文书
优秀部门获奖感言
2014/02/14 职场文书
楼面经理岗位职责范本
2014/02/18 职场文书
企业演讲比赛主持词
2014/03/18 职场文书
公司的门卫岗位职责
2014/09/09 职场文书
课程设计感想范文
2015/08/11 职场文书
小学生禁毒教育心得体会
2016/01/15 职场文书
《雪地里的小画家》教学反思
2016/02/16 职场文书
小学毕业教师寄语
2019/06/21 职场文书
Java实现学生管理系统(IO版)
2022/02/24 Java/Android