首页
所有分类
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选择器的使用方法汇总
Nov 24 HTML / CSS
css3 仿写阿里云水纹效果的示例代码
Feb 10 HTML / CSS
css3 边框、背景、文本效果的实现代码
Mar 21 HTML / CSS
10分钟理解CSS3 Grid布局
Dec 20 HTML / CSS
CSS3改变浏览器滚动条样式
Jan 04 HTML / CSS
webapp字号大小跟随系统字号大小缩放的示例代码
Dec 26 HTML / CSS
Html5内唤醒百度、高德APP的实现示例
May 20 HTML / CSS
使用css创建三角形 使用CSS3创建3d四面体原理及代码(html5实践)
Jan 06 HTML / CSS
HTML5 绘制图像(上)之:关于canvas元素引领下一代web页面的问题
Apr 24 HTML / CSS
HTML5 LocalStorage 本地存储刷新值还在
Mar 10 HTML / CSS
关于canvas.toDataURL 在iOS运行失败的问题解决
Sep 16 HTML / CSS
使用HBuilder制作一个简单的HTML5网页
Jul 07 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
openGauss(1) cypress(1) 缓冲区(1) form表单(1) JDBC(3) ant design(2) 弹窗(1) pdf(1) Eclipse(1) 变量提升(1)
You might like
用mysql_fetch_array()获取当前行数据的方法详解
2013/06/05 PHP
PHP将字符串首字母大小写转换的实例
2017/01/21 PHP
Laravel框架验证码类用法实例分析
2019/09/11 PHP
yii框架数据库关联查询操作示例
2019/10/14 PHP
javascript 打印页面代码
2009/03/24 Javascript
比较全面的event对像在IE与FF中的区别 推荐
2009/09/21 Javascript
jQuery 方法大全方便学习参考
2010/02/25 Javascript
jQuery ajax在GBK编码下表单提交终极解决方案(非二次编码方法)
2010/10/20 Javascript
jQuery UI Datepicker length为空或不是对象错误的解决方法
2010/12/19 Javascript
基于jquery的lazy loader插件实现图片的延迟加载[简单使用]
2011/05/07 Javascript
js螺旋动画效果的具体实例
2013/11/15 Javascript
jquery实现倒计时代码分享
2014/06/13 Javascript
js实现鼠标触发图片抖动效果的方法
2015/02/27 Javascript
Javascript监视变量变化的方法
2015/06/09 Javascript
js实现的黑背景灰色二级导航菜单效果代码
2015/08/24 Javascript
如何在面试中手写出javascript节流和防抖函数
2020/10/22 Javascript
es5 类与es6中class的区别小结
2020/11/09 Javascript
绘制微信小程序验证码功能的实例代码
2021/01/05 Javascript
Python 实现购物商城,含有用户入口和商家入口的示例
2017/09/15 Python
Python内置函数 next的具体使用方法
2017/11/24 Python
Python实现对一个函数应用多个装饰器的方法示例
2018/02/09 Python
python使用rpc框架gRPC的方法
2018/08/24 Python
Ubuntu下升级 python3.7.1流程备忘(推荐)
2018/12/10 Python
python使用PIL和matplotlib获取图片像素点并合并解析
2019/09/10 Python
Python多线程thread及模块使用实例
2020/04/28 Python
HTML5手指下滑弹出负一屏阻止移动端浏览器内置下拉刷新功能的实现代码
2020/04/10 HTML / CSS
美国在线购物频道：Shop LC
2019/04/21 全球购物
语文教育专业应届生求职信
2013/11/23 职场文书
企业党员公开承诺书
2014/03/26 职场文书
趣味运动会策划方案
2014/06/02 职场文书
庆六一文艺汇演活动方案
2014/08/26 职场文书
破坏寝室公物检讨书
2014/11/17 职场文书
宾馆安全管理制度
2015/08/06 职场文书
python 中的@运算符使用
2021/05/26 Python
Vue组件更新数据v-model不生效的解决
2022/04/02 Vue.js
pandas中pd.groupby()的用法详解
2022/06/16 Python