首页
所有分类
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美化表单控件全集
Jun 29 HTML / CSS
CSS3的transition和animation的用法实例介绍
Aug 20 HTML / CSS
借助HTML5 Canvas来绘制三角形和矩形等多边形的方法
Mar 14 HTML / CSS
使用HTML5原生对话框元素并轻松创建模态框组件
Mar 06 HTML / CSS
html5 桌面提醒：Notifycations应用介绍
Nov 27 HTML / CSS
html5 button autofocus 属性介绍及应用
Jan 04 HTML / CSS
HTML5计时器小例子
Oct 15 HTML / CSS
HTML5标签使用方法详解
Nov 27 HTML / CSS
利用canvas实现图片压缩的示例代码
Jul 17 HTML / CSS
html5 canvas的绘制文本自动换行的示例代码
Sep 17 HTML / CSS
浅谈HTML5中dialog元素尝鲜
Oct 15 HTML / CSS
CSS 实现多彩、智能的阴影效果
May 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) 守望先锋(1) 帝国时代(1) 最终幻想(1) 西索(1) explain(2) Docker(14) 我的世界(1)
You might like
Android ProgressBar进度条和ProgressDialog进度框的展示DEMO
2013/06/19 PHP
使用GDB调试PHP代码，解决PHP代码死循环问题
2015/03/02 PHP
PHP常用的排序和查找算法
2015/08/06 PHP
jquery 选项卡效果 新手代码
2011/07/08 Javascript
js中日期的加减法
2015/05/06 Javascript
javascript:void(0)是什么意思及href=#与href=javascriptvoid(0)的区别
2015/11/13 Javascript
JavaScript中数组的22种方法必学(推荐)
2016/07/20 Javascript
js获取Get值的方法
2016/09/29 Javascript
Vue中保存用户登录状态实例代码
2017/06/07 Javascript
详解用Node.js实现Restful风格webservice
2017/09/29 Javascript
Vim快速合并行及vim 将文件所有行合并到一行
2017/11/27 Javascript
Vue2.0 事件的广播与接收(观察者模式)
2018/03/14 Javascript
jquery实现动态改变css样式的方法分析
2019/05/27 jQuery
element-ui 中使用upload多文件上传只请求一次接口
2019/07/19 Javascript
JavaScript RegExp 对象用法详解
2019/09/24 Javascript
[06:24]DOTA2 2015国际邀请赛中国区预选赛第二日TOP10
2015/05/27 DOTA
Python实现一个转存纯真IP数据库的脚本分享
2017/05/21 Python
利用Django内置的认证视图实现用户密码重置功能详解
2017/11/24 Python
Request的中断和ErrorHandler实例解析
2018/02/12 Python
Python图像处理PIL各模块详细介绍(推荐)
2019/07/17 Python
如何在windows下安装配置python工具Ulipad
2020/10/27 Python
Python基于template实现字符串替换
2020/11/27 Python
详解Java中一维、二维数组在内存中的结构
2021/02/11 Python
StubHub新加坡：购买和出售全球活动门票
2017/03/10 全球购物
车间副主任岗位职责
2013/12/24 职场文书
成品仓管员工作职责
2013/12/29 职场文书
入党积极分子思想汇报范文
2014/01/05 职场文书
小学教师管理制度
2014/01/18 职场文书
销售员岗位职责范本
2014/02/03 职场文书
个人简历自我评价范文
2014/02/04 职场文书
爱情保证书大全
2014/04/29 职场文书
学习十八大的心得体会
2014/09/01 职场文书
中秋节晚会开场白
2015/05/29 职场文书
小学大队委竞选口号
2015/12/25 职场文书
CSS实现单选折叠菜单功能
2021/11/01 HTML / CSS
人工智能深度学习OpenAI baselines的使用方法
2022/05/20 Python