首页
所有分类
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 相关文章推荐
CSS3动画animation实现云彩向左滚动
May 09 HTML / CSS
详解CSS3中字体平滑处理和抗锯齿渲染
Mar 29 HTML / CSS
css3+伪元素实现鼠标移入时下划线向两边展开的效果
Apr 25 HTML / CSS
CSS3实现div从下往上滑入滑出效果示例
Apr 28 HTML / CSS
详解css3中dispaly的Grid布局与Flex布局
Sep 11 HTML / CSS
CSS3 实现的火焰动画
Dec 07 HTML / CSS
基于HTML5 FileSystem API的使用介绍
Apr 24 HTML / CSS
针对HTML5的Web Worker使用攻略
Jul 12 HTML / CSS
解决canvas转base64/jpeg时透明区域变成黑色背景的方法
Oct 23 HTML / CSS
html5 video全屏播放/自动播放的实现示例
Aug 06 HTML / CSS
Html5移动端网页端适配(js+rem)
Feb 03 HTML / CSS
CSS实现九宫格布局(自适应)的示例代码
Feb 12 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
骨架屏(1) 加载异常(1) 共享文件夹(1) NginxConfig(1) SVN(1) Slave(1) ESXI(1) 表约束(2) caddy(1) 横向滚动(1)
You might like
php之CodeIgniter学习笔记
2013/06/17 PHP
Yii使用DeleteAll连表删除出现报错问题的解决方法
2016/07/14 PHP
使用户点击后退按钮使效三行代码
2007/07/07 Javascript
扩展jQuery 键盘事件的几个基本方法
2009/10/30 Javascript
JavaScript中使用构造器创建对象无需new的情况说明
2012/03/01 Javascript
jquery.mousewheel实现整屏翻屏效果
2015/08/30 Javascript
实用又漂亮的BootstrapValidator表单验证插件
2016/05/30 Javascript
JS实现的多张图片轮流播放幻灯片效果
2016/07/22 Javascript
jQuery过滤选择器用法示例
2016/09/12 Javascript
基于angular中的重要指令详解($eval,$parse和$compile)
2016/10/21 Javascript
浅谈事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流
2017/07/22 jQuery
JavaScript事件对象event用法分析
2018/07/27 Javascript
详解Vue3.0 + TypeScript + Vite初体验
2021/02/22 Vue.js
使用graphics.py实现2048小游戏
2015/03/10 Python
在Python中marshal对象序列化的相关知识
2015/07/01 Python
对Python中DataFrame按照行遍历的方法
2018/04/08 Python
用python实现将数组元素按从小到大的顺序排列方法
2018/07/02 Python
python儿童学游戏编程知识点总结
2019/06/03 Python
python如何读取bin文件并下发串口
2019/07/05 Python
使用Python项目生成所有依赖包的清单方式
2020/07/13 Python
使用PyCharm官方中文语言包汉化PyCharm
2020/11/18 Python
CSS3中新增的对文本和字体的设置
2020/02/03 HTML / CSS
SQL Server里面什么样的视图才能创建索引
2015/04/17 面试题
工业自动化专业毕业生推荐信
2013/11/18 职场文书
电子信息专业自荐书
2014/02/04 职场文书
创业者是否需要商业计划书？
2014/02/07 职场文书
社会实践活动总结报告
2014/04/29 职场文书
个人安全承诺书
2014/05/22 职场文书
诚实守信道德模范事迹材料
2014/08/15 职场文书
手术室护士个人总结
2015/02/13 职场文书
2015年八一建军节慰问信
2015/03/23 职场文书
2015年乡镇民政工作总结
2015/05/13 职场文书
金正昆讲礼仪观后感
2015/06/11 职场文书
装修安全责任协议书
2016/03/22 职场文书
vue项目打包后路由错误的解决方法
2022/04/13 Vue.js
python实现一个简单的贪吃蛇游戏附代码
2022/06/28 Python