首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 HTML / CSS

CSS3 3D旋转rotate效果实例介绍

Posted in HTML / CSS onMay 03, 2016

本文实例为大家分享了CSS3 3D旋转rotate效果实例，供大家参考，具体内容如下

效果图：

CSS3 3D旋转rotate效果实例介绍

示例代码

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.             -webkit-transition: background-color 3s;     
  18.         }     
  19.         #block:hover {     
  20.             background-color: purple;     
  21.         }     
  22.         #ep {     
  23.             text-align: center;     
  24.         }     
  25.         #ep input {     
  26.             width: 800px;     
  27.         }     
  28.     </style>     
  29.     <script>     
  30.         function rotate() {     
  31.             var x = document.getElementById("rotateX").value;     
  32.             var y = document.getElementById("rotateY").value;     
  33.             var z = document.getElementById("rotateZ").value;     
  34.             document.getElementById("block").style.webkitTransform = "rotateX(" + x + "deg) rotateY(" + y + "deg) rotateZ(" + z + "deg)";     
  35.      
  36.             document.getElementById("degx-span").innerText = x;     
  37.             document.getElementById("degy-span").innerText = y;     
  38.             document.getElementById("degz-span").innerText = z;     
  39.         }     
  40.     </script>     
  41. </head>     
  42. <body>     
  43.     <div id="experiment">     
  44.         <div id="block"></div>     
  45.     </div>     
  46.     <div id="ep">     
  47.         <p>rotate x: <span id="degx-span">0</span>deg</p>     
  48.         <input type="range" min="-360" max="360" id="rotateX" value="0" class="range-control" onmousemove="rotate()"/><br/>     
  49.         <p>rotate y: <span id="degy-span">0</span>deg</p>     
  50.         <input type="range" min="-360" max="360" id="rotateY" value="0" class="range-control" onmousemove="rotate()"/><br/>     
  51.         <p>rotate z: <span id="degz-span">0</span>deg</p>     
  52.         <input type="range" min="-360" max="360" id="rotateZ" value="0" class="range-control" onmousemove="rotate()"/><br/>     
  53.     </div>     
  54. </body>     
  55. </html>   

以上就是本文的全部内容，希望对大家的学习有所帮助。

CSS3 3D旋转rotate效果实例介绍

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

HTML / CSS 相关文章推荐
CSS实现圆形放大镜狙击镜效果 只有圆圈里的放大
Dec 10 HTML / CSS
布局和排版教程 纯css3实现图片三角形排列
Oct 17 HTML / CSS
HTML5中的nav标签学习笔记
Jun 24 HTML / CSS
利用Canvas模仿百度贴吧客户端loading小球的方法示例
Aug 13 HTML / CSS
html5构建触屏网站之touch事件介绍
Jan 07 HTML / CSS
多视角3D可旋转的HTML5 Logo动画
Mar 02 HTML / CSS
使用phonegap创建联系人的实现方法
Mar 30 HTML / CSS
html5使用Drag事件编辑器拖拽上传图片的示例代码
Aug 22 HTML / CSS
如何在Canvas中添加事件的方法示例
May 21 HTML / CSS
血轮眼轮回眼特效 html+css
Mar 31 HTML / CSS
postman中form-data、x-www-form-urlencoded、raw、binary的区别介绍
Jan 18 HTML / CSS
CSS子盒子水平和垂直居中的五种方法
Jul 23 HTML / CSS
CSS3过渡transition效果实例介绍
May 03 #HTML / CSS
浅析rem和em和px vh vw和% 移动端长度单位
Apr 28 #HTML / CSS
CSS3近阶段篇之酷炫的3D旋转透视
Apr 28 #HTML / CSS
CSS3的first-child选择器实战攻略
Apr 28 #HTML / CSS
CSS3径向渐变之大鱼吃小鱼之孤单的大鱼
Apr 26 #HTML / CSS
CSS3实现超酷的黑猫警长首页
Apr 26 #HTML / CSS
CSS3实现千变万化的文字阴影text-shadow效果设计
Apr 26 #HTML / CSS
EditText(1) Spring JPA(1) cmd(1) TextInputLayout(1) openEuler(1) Switch(1) 远程桌面(2) REST(1) Django(9) Spring Bean(1)
You might like
php使用sql server验证连接数据库的方法
2014/12/25 PHP
标准PHP的AES加密算法类
2015/03/12 PHP
PHP使用redis消息队列发布微博的方法示例
2017/06/22 PHP
PHP+Ajax简单get验证操作示例
2019/03/02 PHP
添加JavaScript重载函数的辅助方法2
2010/07/04 Javascript
javascript天然的迭代器
2010/10/29 Javascript
Javascript继承机制的设计思想分享
2011/08/28 Javascript
jQuery基本选择器选择元素使用介绍
2013/04/18 Javascript
禁用backspace网页回退功能的实现代码
2016/11/15 Javascript
Javascript实现倒计时（防页面刷新）实例
2016/12/13 Javascript
jquery UI Datepicker时间控件冲突问题解决
2016/12/16 Javascript
微信小程序 本地数据读取实例
2017/04/27 Javascript
JS获取子、父、兄节点方法小结
2017/08/14 Javascript
Vue结合SignalR实现前后端实时消息同步
2017/09/19 Javascript
JavaScript数据结构与算法之检索算法示例【二分查找法、计算重复次数】
2019/02/22 Javascript
layui实现数据表格table分页功能（ajax异步）
2019/07/27 Javascript
vue3使用vue-count-to组件的实现
2020/12/25 Vue.js
Python tkinter模块弹出窗口及传值回到主窗口操作详解
2017/07/28 Python
Python递归实现汉诺塔算法示例
2018/03/19 Python
python 实现在Excel末尾增加新行
2018/05/02 Python
使用Python实现图像标记点的坐标输出功能
2019/08/14 Python
PyTorch中常用的激活函数的方法示例
2019/08/20 Python
jupyter notebook中新建cell的方法与快捷键操作
2020/04/22 Python
python中用ctypes模拟点击的实例讲解
2020/11/26 Python
python中pyqtgraph知识点总结
2021/01/26 Python
Python爬虫+Tkinter制作一个翻译软件的示例
2021/02/20 Python
canvas里面如何基于随机点绘制一个多边形的方法
2018/06/13 HTML / CSS
鱼油专家：Omegavia
2016/10/10 全球购物
英国最大的纸工艺品商店：CraftStash
2018/12/01 全球购物
Parfumdreams芬兰：购买香水和化妆品
2021/02/13 全球购物
什么情况下你必须要把一个类定义为abstract的
2013/01/06 面试题
畜牧兽医本科生个人的自我评价
2013/10/11 职场文书
计算机网络专业推荐信
2013/11/24 职场文书
推荐信格式范文
2014/05/09 职场文书
幼儿园大班开学寄语
2014/08/02 职场文书
关于成立领导小组的通知
2015/04/23 职场文书