首页
所有分类
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伪类选择器：nth-child()
Apr 02 HTML / CSS
深入理解css属性的选择对动画性能的影响
Apr 20 HTML / CSS
CSS3实现内凹圆角的实例代码
May 04 HTML / CSS
HTML5仿手机微信聊天界面
Mar 18 HTML / CSS
使用HTML5 IndexDB存储图像和文件的示例
Nov 05 HTML / CSS
HTML5 video视频字幕的使用和制作方法
May 03 HTML / CSS
html5与css3小应用
Apr 03 HTML / CSS
html5+svg学习指南之SVG基础知识
Dec 17 HTML / CSS
探索HTML5本地存储功能运用技巧
Mar 02 HTML / CSS
html5 外链式实现加减乘除的代码
Sep 04 HTML / CSS
详解canvas.toDataURL()报错的解决方案全都在这了
Mar 31 HTML / CSS
从QQtabBar看css命名规范BEM的详细介绍
Aug 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
爬虫(2) pip(1) Counter(1) 字典(3) 抖音(1) most_common(1) LOGO(1) SingleFlight(2) Xpath(1) 并发(8)
You might like
linux下 C语言对 php 扩展
2008/12/14 PHP
windwos下使用php连接oracle数据库的过程分享
2014/05/26 PHP
php判断并删除空目录及空子目录的方法
2015/02/11 PHP
php示例详解Constructor Prototype Pattern 原型模式
2015/10/15 PHP
浅谈php中curl、fsockopen的应用
2016/12/10 PHP
php实现微信模板消息推送
2018/03/30 PHP
Thinkphp整合阿里云OSS图片上传实例代码
2019/04/28 PHP
List the Codec Files on a Computer
2007/06/11 Javascript
Prototype Hash对象 学习
2009/07/19 Javascript
无缝滚动改进版支持上下左右滚动（封装成函数）
2012/12/04 Javascript
jquery struts 验证唯一标识(公用方法)
2013/03/27 Javascript
jQuery文本框(input textare)事件绑定方法教程
2013/04/24 Javascript
JavaScript返回当前会话cookie全部键值对照的方法
2015/04/03 Javascript
巧用jQuery选择器提高写表单效率的方法
2016/08/19 Javascript
原生js的RSA和AES加密解密算法
2016/10/08 Javascript
JS基于贪心算法解决背包问题示例
2017/11/27 Javascript
解决Jstree 选中父节点时被禁用的子节点也会选中的问题
2017/12/27 Javascript
基于jquery实现左右上下移动效果
2018/05/02 jQuery
vue跳转方式（打开新页面）及传参操作示例
2020/01/26 Javascript
openlayers实现地图弹窗
2020/09/25 Javascript
Python fileinput模块使用实例
2015/06/03 Python
python fuzzywuzzy模块模糊字符串匹配详细用法
2019/08/29 Python
使用 Supervisor 监控 Python3 进程方式
2019/12/05 Python
Django media static外部访问Django中的图片设置教程
2020/04/07 Python
基于Keras 循环训练模型跑数据时内存泄漏的解决方式
2020/06/11 Python
Django vue前后端分离整合过程解析
2020/11/20 Python
HTML5 Canvas 实现圆形进度条并显示数字百分比效果示例
2017/08/18 HTML / CSS
Pedro官网：新加坡时尚品牌
2019/08/27 全球购物
XMLHttpRequest对象在IE和Firefox中创建方式有没有不同
2016/03/23 面试题
员工培训邀请函
2014/02/02 职场文书
《花的勇气》教后反思
2014/02/12 职场文书
党员活动日总结
2014/05/05 职场文书
银行先进个人事迹材料
2014/05/11 职场文书
四风对照检查材料范文
2014/09/27 职场文书
工作年限证明模板
2014/11/01 职场文书
Redis基本数据类型哈希Hash常用操作命令
2022/06/01 Redis