首页
所有分类
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简单练习实现遨游浏览器logo的绘制
Jan 30 HTML / CSS
7款设计巧妙的css3飘带状3D立体效果的导航菜单和表单窗口
Feb 04 HTML / CSS
CSS3旋转——彩色扇子兼容firefox浏览器
Jun 04 HTML / CSS
CSS3属性box-shadow使用指南
Dec 09 HTML / CSS
CSS3 实现图形下落动画效果
Nov 13 HTML / CSS
利用Canvas模仿百度贴吧客户端loading小球的方法示例
Aug 13 HTML / CSS
用canvas实现图片滤镜效果附演示
Nov 05 HTML / CSS
HTML5注册页面示例代码
Mar 27 HTML / CSS
手把手教你实现一个canvas智绘画板的方法
Mar 04 HTML / CSS
html5 canvas绘制网络字体的常用方法
Aug 26 HTML / CSS
Canvas 文本填充线性渐变的使用详解
Jun 22 HTML / CSS
常用的文件对应的MIME类型汇总
Apr 26 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
Lifecycle(1) 小喇叭开始广播了(1) 小喇叭(1) 克隆(1) 微信(2) 温控(1) 脏读(2) S-2000(1) IC-R9500(1) 增删查改(1)
You might like
PHP4实际应用经验篇(2)
2006/10/09 PHP
php中cookie实现二级域名可访问操作的方法
2014/11/11 PHP
php中字符查找函数strpos、strrchr与strpbrk用法
2014/11/18 PHP
PHP调用wsdl文件类型的接口代码分享
2014/11/19 PHP
Windows7下的php环境配置教程
2015/02/28 PHP
PHP基于方差和标准差计算学生成绩的稳定性示例
2017/07/04 PHP
PHP实现多图上传和单图上传功能
2018/05/17 PHP
firefox下jquery ajax返回object XMLDocument处理方法
2014/01/26 Javascript
学习Bootstrap组件之下拉菜单
2015/07/28 Javascript
阻止表单提交按钮多次提交的完美解决方法
2016/05/16 Javascript
Javascript 引擎工作机制详解
2016/11/30 Javascript
Nodejs+Socket.io实现通讯实例代码
2017/02/13 NodeJs
基于JavaScript实现验证码功能
2017/04/01 Javascript
redux中间件之redux-thunk的具体使用
2018/04/17 Javascript
Vue动态获取width的方法
2018/08/22 Javascript
浅谈Vue页面级缓存解决方案feb-alive(上)
2019/04/14 Javascript
vue实现点击追加选中样式效果
2019/11/01 Javascript
[34:27]DOTA2上海特级锦标赛B组败者赛 VG VS Spirit第一局
2016/02/26 DOTA
[45:14]Optic vs VP 2018国际邀请赛淘汰赛BO3 第二场 8.24
2018/08/25 DOTA
Python文件和流(实例讲解)
2017/09/12 Python
python区块及区块链的开发详解
2019/07/03 Python
Python 一键获取百度网盘提取码的方法
2019/08/01 Python
Python 使用 PyMysql、DBUtils 创建连接池提升性能
2019/08/14 Python
详解Python Opencv和PIL读取图像文件的差别
2019/12/27 Python
python处理写入数据代码讲解
2020/10/22 Python
Pytorch 中的optimizer使用说明
2021/03/03 Python
CSS3制作精致的照片墙特效
2016/06/07 HTML / CSS
详解CSS透明opacity和IE各版本透明度滤镜filter的最准确用法
2016/12/20 HTML / CSS
CSS3之2D与3D变换的实现方法
2019/01/28 HTML / CSS
十佳美德少年事迹材料
2014/02/05 职场文书
会计员岗位职责
2014/03/15 职场文书
四风对照检查材料思想汇报
2014/09/20 职场文书
CSS3 制作精美的定价表
2021/04/06 HTML / CSS
Nginx实现高可用集群构建(Keepalived+Haproxy+Nginx)
2021/05/27 Servers
Python OpenCV 图像平移的实现示例
2021/06/04 Python
 分享一个Python 遇到数据库超好用的模块
2022/04/06 Python