首页
所有分类
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图片旋转特效(360/60/-360度)
Oct 10 HTML / CSS
html5+css3气泡组件的实现
Nov 21 HTML / CSS
CSS3制作苹果风格键盘特效
Feb 26 HTML / CSS
CSS3点击按钮实现背景渐变动画效果
Oct 19 HTML / CSS
CSS3 新增选择器的实例
Nov 13 HTML / CSS
详解HTML5中垂直上下居中的解决方案
Dec 20 HTML / CSS
canvas三角函数模拟水波效果的示例代码
Jul 03 HTML / CSS
HTML5 video视频字幕的使用和制作方法
May 03 HTML / CSS
html5开发之viewport使用
Oct 17 HTML / CSS
HTML5调用手机摄像头拍照的实现思路及代码
Jun 15 HTML / CSS
HTML基础详解（下）
Oct 16 HTML / CSS
css3新特性的应用示例分析
Mar 16 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) explain(2) 守望先锋(1) 波段(1) AngularJS(2) 巫师(1) 西索(1) 城市猎人(1) 帝国时代(1) Docker(14)
You might like
PHP FOR MYSQL 代码生成助手(根据Mysql里的字段自动生成类文件的)
2011/07/23 PHP
解析php根据ip查询所在地区(非常有用,赶集网就用到)
2013/07/01 PHP
PHP输出缓存ob系列函数详解
2014/03/11 PHP
PHP.ini安全配置检测工具pcc简单介绍
2015/07/02 PHP
PHP Ajax跨域问题解决方案代码实例
2020/08/01 PHP
一段利用WSH获取登录时间的jscript代码
2008/05/11 Javascript
JSQL 基于客户端的成绩统计实现方法
2010/05/05 Javascript
Js 弹出框口并返回值的两种常用方法
2010/12/30 Javascript
javascript自定义startWith()和endWith()的两种方法
2013/11/11 Javascript
javascript面向对象之访问对象属性的两种方式分析
2015/01/13 Javascript
javascript动态设置样式style实例分析
2015/05/13 Javascript
js实现拖拽效果（构造函数）
2015/12/14 Javascript
JavaScript知识点总结之如何提高性能
2016/01/15 Javascript
NodeJS整合银联网关支付（DEMO）
2016/11/09 NodeJs
vue轮播图插件vue-awesome-swiper
2017/11/27 Javascript
JavaScript通过mouseover()实现图片变大效果的示例
2017/12/20 Javascript
React中的refs的使用教程
2018/02/13 Javascript
vue将时间戳转换成自定义时间格式的方法
2018/03/02 Javascript
Vue页面跳转传递参数及接收方式
2020/09/09 Javascript
[02:59]2014DOTA2西雅图国际邀请赛 圆满落幕中国夺冠
2014/07/23 DOTA
Python协程的用法和例子详解
2017/09/09 Python
Python使用asyncio包处理并发详解
2017/09/09 Python
详解Python 协程的详细用法使用和例子
2018/06/15 Python
python3 爬取图片的实例代码
2018/11/06 Python
Python必须了解的35个关键词
2020/07/16 Python
python3实现飞机大战
2020/11/29 Python
床上用品全球在线购物：BeddingInn
2016/12/18 全球购物
Europcar意大利：汽车租赁
2019/07/07 全球购物
大学国际贸易专业自荐信
2014/06/05 职场文书
幸福家庭标语
2014/06/27 职场文书
实习生工作证明范本
2014/09/14 职场文书
先进教师个人主要事迹材料
2015/11/03 职场文书
护士医德医风心得体会
2016/01/25 职场文书
Python利用folium实现地图可视化
2021/05/23 Python
使用@Value值注入及配置文件组件扫描
2021/07/09 Java/Android
Linux下搭建SFTP服务器的命令详解
2022/06/25 Servers