首页
所有分类
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高级选择器使用方法
Dec 02 HTML / CSS
一款纯css3实现的tab选项卡的实列教程
Dec 11 HTML / CSS
一款基于css3麻将筛子3D翻转特效的实例教程
Dec 31 HTML / CSS
使用css3做0.5px的细线的示例代码
Jan 18 HTML / CSS
解决CSS3 transition-delay 属性默认值0不带单位失效的问题
Oct 29 HTML / CSS
HTML5的结构和语义(4):语义性的内联元素
Oct 17 HTML / CSS
关于HTML5的22个初级技巧(图文教程)
Jun 21 HTML / CSS
HTML5标签与HTML4标签的区别示例介绍
Jul 18 HTML / CSS
html5 css3实例教程 一款html5和css3实现的小机器人走路动画
Oct 20 HTML / CSS
HTML5中的进度条progress元素简介及兼容性处理
Jun 02 HTML / CSS
10个最常见的HTML5面试题 附答案
Jun 06 HTML / CSS
使用canvas对多图片拼合并导出图片的方法
Aug 28 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) redo log(1) 存储过程(3) 爬虫(2) MIME(1) LOGO(1) 增删改查(2) binlog(2) 优化(1) 写入策略(1)
You might like
php设计模式 Delegation(委托模式)
2011/06/26 PHP
一个简单的php加密解密函数(动态加密)
2013/06/19 PHP
PHP SPL标准库中的常用函数介绍
2015/05/11 PHP
PHP函数实现从一个文本字符串中提取关键字的方法
2015/07/01 PHP
php实现有序数组打印或排序的方法【附Python、C及Go语言实现代码】
2016/11/10 PHP
php实现socket推送技术的示例
2017/12/20 PHP
浅析javascript操作 cookie对象
2014/12/26 Javascript
学习Angular中作用域需要注意的坑
2016/08/17 Javascript
jQuery编写网页版2048小游戏
2017/01/06 Javascript
jquery实现自适应banner焦点图
2017/02/16 Javascript
Vue单页式应用(Hash模式下)实现微信分享的实例
2017/07/21 Javascript
基于LayUI分页和LayUI laypage分页的使用示例
2017/08/02 Javascript
JS动画实现回调地狱promise的实例代码详解
2018/11/08 Javascript
微信小程序使用map组件实现获取定位城市天气或者指定城市天气数据功能
2019/01/22 Javascript
[20:21]《一刀刀一天》第十六期:TI国际邀请赛正式打响,总奖金超过550万
2014/05/23 DOTA
Python实例分享：快速查找出被挂马的文件
2014/06/08 Python
python获取本地计算机名字的方法
2015/04/29 Python
Python进程间通信用法实例
2015/06/04 Python
Python中生成Epoch的方法
2017/04/26 Python
Python读取sqlite数据库文件的方法分析
2017/08/07 Python
对python产生随机的二维数组实例详解
2018/12/13 Python
简单了解Python3里的一些新特性
2019/07/13 Python
python二维键值数组生成转json的例子
2019/12/06 Python
使用Python操作ArangoDB的方法步骤
2020/02/02 Python
keras K.function获取某层的输出操作
2020/06/29 Python
TensorFlow-gpu和opencv安装详细教程
2020/06/30 Python
HTML5 Canvas+JS控制电脑或手机上的摄像头实例
2014/05/03 HTML / CSS
AHAVA美国官方网站：死海海泥护肤品牌
2016/10/18 全球购物
如何获得EntityManager
2014/02/09 面试题
2014年审计工作总结
2014/11/17 职场文书
优秀班组申报材料
2014/12/25 职场文书
幼师辞职信范文
2015/02/27 职场文书
学习心理学心得体会
2016/01/22 职场文书
python中的sys模块和os模块
2022/03/20 Python
JS setTimeout与setInterval的区别
2022/04/20 Javascript
Zabbix对Kafka topic积压数据监控的问题(bug优化)
2022/07/07 Servers