首页
所有分类
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教程:边框属性border的极致应用
Apr 02 HTML / CSS
css3实现背景颜色渐变让图片不再是唯一的实现方式
Dec 18 HTML / CSS
利用css3制作3D样式按钮实现代码
Mar 18 HTML / CSS
一款利用纯css3实现的360度翻转按钮的实例教程
Nov 05 HTML / CSS
移动端适配 使px自动转换rem
Aug 26 HTML / CSS
关于css中margin的值和垂直外边距重叠问题
Oct 27 HTML / CSS
HTML5 本地存储实现购物车功能
Sep 07 HTML / CSS
html5 svg 中元素点击事件添加方法
Jan 16 HTML / CSS
HTML5组件Canvas实现图像灰度化(步骤+实例效果)
Apr 22 HTML / CSS
Canvas实现贝赛尔曲线轨迹动画的示例代码
Apr 25 HTML / CSS
HTML5拖拽文件上传的示例代码
Mar 04 HTML / CSS
flex布局中使用flex-wrap实现换行的项目实践
Jun 21 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
el-table(1) 脚手架(2) SingleFlight(2) TableField(1) 并发(8) frozenset(1) Mybatis-Plus(3) set(1) Next.js(1) create(1)
You might like
PHP正则验证字符串是否为数字的两种方法并附常用正则
2019/02/27 PHP
PHP延迟静态绑定使用方法实例解析
2020/09/05 PHP
javascript数组组合成字符串的脚本
2021/01/06 Javascript
js保留两位小数使用toFixed实现
2013/07/29 Javascript
javascript 树形导航菜单实例代码
2013/08/13 Javascript
JavaScript中for..in循环陷阱介绍
2013/11/12 Javascript
Jquery创建一个层当鼠标移动到层上面不消失效果
2013/12/12 Javascript
PHP 数组current和next用法分享
2015/03/05 Javascript
jQuery简单几行代码实现tab切换
2015/03/10 Javascript
JavaScript限定图片显示大小的方法
2015/03/11 Javascript
javascript中alert()与console.log()的区别
2015/08/26 Javascript
JS中的hasOwnProperty()和isPrototypeOf()属性实例详解
2016/08/11 Javascript
JavaScript实现输入框与清空按钮联动效果
2016/09/09 Javascript
EasyUI 中combotree 默认不能选择父节点的实现方法
2016/11/07 Javascript
完美实现js焦点轮播效果(一)
2017/03/07 Javascript
详解Vuejs2.0之异步跨域请求
2017/04/20 Javascript
用react-redux实现react组件之间数据共享的方法
2018/06/08 Javascript
创建echart多个联动的示例代码
2018/11/23 Javascript
JavaScript Image对象实现原理实例解析
2020/08/26 Javascript
django项目运行因中文而乱码报错的几种情况解决
2017/11/07 Python
Python中跳台阶、变态跳台阶与矩形覆盖问题的解决方法
2018/05/19 Python
Python中@property的理解和使用示例
2019/06/11 Python
python实现beta分布概率密度函数的方法
2019/07/08 Python
Pytorch之view及view_as使用详解
2019/12/31 Python
Python os模块常用方法和属性总结
2020/02/20 Python
Python读取xlsx数据生成图标代码实例
2020/08/12 Python
纯CSS3实现Material Design效果
2017/03/09 HTML / CSS
艺术爱好者的自我评价分享
2013/10/08 职场文书
体育口号大全
2014/06/18 职场文书
受伤赔偿协议书
2014/09/24 职场文书
医院合作意向书范本
2015/05/08 职场文书
游戏开发中如何使用CocosCreator进行音效处理
2021/04/14 Javascript
JS不要再到处使用绝对等于运算符了
2021/04/30 Javascript
使用SQL实现车流量的计算的示例代码
2022/02/28 SQL Server
delete in子查询不走索引问题分析
2022/07/07 MySQL
使用CSS实现音波加载效果
2023/05/07 HTML / CSS