首页
所有分类
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 please 跨浏览器的CSS3产生器
Mar 14 HTML / CSS
CSS3 icon font完全指南(CSS3 font 会取代icon图标)
Jan 06 HTML / CSS
css3 给页面加个半圆形导航条主要利用旋转和倾斜样式
Feb 10 HTML / CSS
可以随进度显示不同颜色的css3进度条分享
Apr 11 HTML / CSS
解决CSS3的opacity属性带来的层叠顺序问题
May 09 HTML / CSS
HTML5实现QQ聊天气泡效果
Jun 26 HTML / CSS
HTML5调用手机摄像头拍照的实现思路及代码
Jun 15 HTML / CSS
HTML5 Canvas之测试浏览器是否支持Canvas的方法
Jan 01 HTML / CSS
HTML5不支持标签和新增标签详解
Jun 27 HTML / CSS
HTML5自定义元素播放焦点图动画的实现
Sep 25 HTML / CSS
Html5监听手机摇一摇事件的实现
Nov 07 HTML / CSS
HTML5 层的叠加的实现
Jul 07 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) ICF-7600(1) 发报机(1) PL-880(1) 天线(6) 索尼(5) 短波(1) SONY(15) 电磁辐射(1) 电路图(1)
You might like
php实现单链表的实例代码
2013/03/22 PHP
php生成txt文件实例代码介绍
2016/04/28 PHP
PHP数据库操作三：redis用法分析
2017/08/16 PHP
Laravel框架实现利用监听器进行sql语句记录功能
2018/06/06 PHP
Prototype使用指南之range.js
2007/01/10 Javascript
js动态生成指定行数的表格
2013/07/11 Javascript
浅谈JavaScript的事件
2015/02/27 Javascript
浅谈JavaScript数据类型
2015/03/03 Javascript
JavaSacript中charCodeAt()方法的使用详解
2015/06/05 Javascript
浅谈javascript的Array.prototype.slice.call
2015/08/31 Javascript
js手机号4位显示空格，银行卡每4位显示空格效果
2017/03/23 Javascript
bootstrap paginator分页前后台用法示例
2017/06/17 Javascript
js解决软键盘遮挡输入框的问题分享
2017/12/19 Javascript
jQuery实现文件编码成base64并通过AJAX上传的方法
2018/04/12 jQuery
vue中如何让子组件修改父组件数据
2018/06/14 Javascript
巧妙运用v-model实现父子组件传值的方法示例
2019/04/07 Javascript
vue配置接口域名方法总结
2019/05/12 Javascript
Vuex实现数据增加和删除功能
2019/11/11 Javascript
Python使用MySQLdb for Python操作数据库教程
2014/10/11 Python
Django查找网站项目根目录和对正则表达式的支持
2015/07/15 Python
python anaconda 安装 环境变量 升级 以及特殊库安装的方法
2017/06/21 Python
Python引用类型和值类型的区别与使用解析
2017/10/17 Python
python生成二维码的实例详解
2017/10/29 Python
python实现拓扑排序的基本教程
2018/03/11 Python
pyqt5 实现工具栏文字图片同时显示
2019/06/13 Python
Pytorch 实现冻结指定卷积层的参数
2020/01/06 Python
python3将变量写入SQL语句的实现方式
2020/03/02 Python
使用Python爬取弹出窗口信息的实例
2020/03/14 Python
ECCO爱步官方旗舰店：丹麦鞋履品牌
2018/01/02 全球购物
匈牙利最大的健身制造商和销售商：inSPORTline
2018/10/30 全球购物
哪些情况下不应该使用索引
2015/07/20 面试题
银行毕业实习自我鉴定
2013/09/19 职场文书
四查四看自我剖析材料
2014/09/19 职场文书
银行领导班子四风对照检查材料
2014/09/27 职场文书
毕业典礼致辞
2015/07/29 职场文书
值班管理制度范本
2015/08/06 职场文书