首页
所有分类
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教程(7):CSS3嵌入字体
Apr 02 HTML / CSS
CSS3制作半透明边框(Facebox)类似渐变
Dec 09 HTML / CSS
利用CSS3的transition属性实现滑动效果
Aug 05 HTML / CSS
10分钟理解CSS3 Grid布局
Dec 20 HTML / CSS
HTML5 与 XHTML2
Oct 17 HTML / CSS
html5 video标签屏蔽右键视频另存为的js代码
Nov 12 HTML / CSS
用html5实现语音搜索框的方法
Mar 18 HTML / CSS
html5桌面通知(Web Notifications)实例解析
Jul 07 HTML / CSS
使用HTML5的Canvas绘制曲线的简单方法
Sep 08 HTML / CSS
HTML5标签使用方法详解
Nov 27 HTML / CSS
html5需遵循的6个设计原则
Apr 27 HTML / CSS
鼠标滚轮事件和Mac触控板双指事件
Dec 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
单向链表(1) 双向链表(6) 扫雷(1) 区块链(2) NumPy(2) TypeScript(2) Scheduled(1) 模拟登录(1) RTMP(1) text-shadow(1)
You might like
服务器端解压缩zip的脚本
2006/12/22 PHP
php $_SERVER当前完整url的写法
2009/11/12 PHP
用PHP的超级变量$_GET获取HTML表单(Form) 数据
2011/05/07 PHP
PHP面向对象程序设计实例分析
2016/01/26 PHP
php lcg_value与mt_rand生成0~1随机小数的效果对比分析
2017/04/05 PHP
详解json在php中的应用
2018/09/30 PHP
静态的动态续篇之来点XML
2006/08/15 Javascript
javascript学习笔记(十三) js闭包介绍(转)
2012/06/20 Javascript
javascript中的startWith和endWith的几种实现方法
2013/05/07 Javascript
JavaScript对IE操作的经典代码(推荐)
2014/03/10 Javascript
jQuery插件jFade实现鼠标经过的图片高亮其它变暗
2015/03/14 Javascript
详解微信小程序 通过控制CSS实现view隐藏与显示
2017/05/24 Javascript
安装vue-cli报错 -4058 的解决方法
2017/10/19 Javascript
在vue中v-bind使用三目运算符绑定class的实例
2018/09/29 Javascript
vue2.0 路由模式mode=&quot;history&quot;的作用
2018/10/18 Javascript
nodejs的安装使用与npm的介绍
2019/09/11 NodeJs
vue点击标签切换选中及互相排斥操作
2020/07/17 Javascript
vuex管理状态仓库使用详解
2020/07/29 Javascript
vue 内联样式style中的background用法说明
2020/08/05 Javascript
VUE异步更新DOM - 用$nextTick解决DOM视图的问题
2020/11/06 Javascript
JavaScript实现商品评价五星好评
2020/11/30 Javascript
用python + openpyxl处理excel2007文档思路以及心得
2014/07/14 Python
使用Python从有道词典网页获取单词翻译
2016/07/03 Python
浅谈CSS3特性查询（Feature Query: @supports）功能简介
2017/07/31 HTML / CSS
美国诺德斯特龙百货官网：Nordstrom
2016/08/23 全球购物
高三自我鉴定怎么写
2013/10/19 职场文书
物业保安主管岗位职责
2013/12/25 职场文书
优良学风班申请材料
2014/02/13 职场文书
《赶海》教学反思
2014/04/20 职场文书
幼儿教师师德演讲稿
2014/05/06 职场文书
情况说明书格式范文
2014/05/06 职场文书
项目申请汇报材料
2014/08/16 职场文书
中学生民族团结演讲稿
2014/08/27 职场文书
村委会贫困证明范本
2014/09/17 职场文书
涪陵白鹤梁导游词
2015/02/09 职场文书
nginx常用命令放入shell脚本详解
2021/03/31 Servers