首页
所有分类
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 选择器 基本选择器介绍
Jan 21 HTML / CSS
浅析几个CSS3常用功能的写法
Jun 05 HTML / CSS
使用CSS3的appearance属性改变元素的外观的方法
Dec 12 HTML / CSS
CSS3色彩模式有哪些？CSS3 HSL色彩模式的定义
Apr 26 HTML / CSS
CSS3打造百度贴吧的3D翻牌效果示例
Jan 04 HTML / CSS
html5 canvas实现跟随鼠标旋转的箭头
Mar 11 HTML / CSS
html5使用canvas画一条线
Dec 15 HTML / CSS
使用html5 canvas 画时钟代码实例分享
Nov 11 HTML / CSS
深入浅析HTML5中的article和section的区别
May 15 HTML / CSS
Html5自定义字体解决方法
Oct 09 HTML / CSS
使用html2canvas实现将html内容写入到canvas中生成图片
Jan 03 HTML / CSS
html5实现输入框fixed定位在屏幕最底部兼容性
Jul 03 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) 富碳陨石(1) iPhone(1) 火星(2) DNA(2) 数据(1) 嘧啶碱基(2) 大脑(1) 陨石(1) RNA(2)
You might like
深入PHP nl2br()格式化输出的详解
2013/06/05 PHP
页面乱码问题的根源及其分析
2013/08/09 PHP
PHP 导出Excel示例分享
2014/08/18 PHP
PHP cURL初始化和执行方法入门级代码
2015/05/28 PHP
搭建自己的PHP MVC框架详解
2017/08/16 PHP
laravel框架select2多选插件初始化默认选中项操作示例
2020/02/18 PHP
音乐播放用的的几个函数
2006/09/07 Javascript
JS 控制非法字符的输入代码
2009/12/04 Javascript
javascript demo 基本技巧
2009/12/18 Javascript
js关闭子窗体刷新父窗体实现方法
2012/12/04 Javascript
jquery动态加载select下拉框示例代码
2013/12/10 Javascript
Javascript冒泡排序算法详解
2014/12/03 Javascript
JavaScript操作cookie类实例
2015/03/31 Javascript
浅谈JavaScript正则表达式分组匹配
2015/04/10 Javascript
JS实现鼠标移上去显示图片或微信二维码
2016/12/14 Javascript
js 数字、字符串、布尔值的转换方法(必看)
2017/04/07 Javascript
jQuery实现table中两列CheckBox只能选中一个的示例
2017/09/22 jQuery
使用live-server快速搭建本地服务器+自动刷新的方法
2018/03/09 Javascript
Angular 容器部署的方法
2018/04/17 Javascript
如何让Nodejs支持H5 History模式(connect-history-api-fallback源码分析)
2019/05/30 NodeJs
微信小程序纯文本实现@功能
2020/04/08 Javascript
基于Python获取照片的GPS位置信息
2020/01/20 Python
python中with用法讲解
2020/02/07 Python
python3连接MySQL8.0的两种方式
2020/02/17 Python
Jupyter Notebook输出矢量图实例
2020/04/14 Python
Pycharm激活方法及详细教程(详细且实用)
2020/05/12 Python
加拿大租车网站：Enterprise Rent-A-Car
2018/07/26 全球购物
师范大学音乐表演专业求职信
2013/10/23 职场文书
大学生简历的个人自我评价
2013/12/04 职场文书
遵纪守法演讲稿
2014/05/23 职场文书
公司合作意向书范文
2014/07/30 职场文书
爱牙日活动总结
2014/08/29 职场文书
检讨书范文500字
2015/01/28 职场文书
导游词格式
2015/02/13 职场文书
物业接待员岗位职责
2015/04/15 职场文书
MySQL 计算连续登录天数
2022/05/11 MySQL