首页
所有分类
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实现自定义滚动条代码分享
Aug 18 HTML / CSS
基于CSS3实现的漂亮Menu菜单效果代码
Sep 10 HTML / CSS
CSS3哪些新特性值得称赞
Mar 02 HTML / CSS
使用CSS3设计地图上的雷达定位提示效果
Apr 05 HTML / CSS
css3加js做一个简单的3D行星运转效果实例代码
Jan 18 HTML / CSS
HTML5+CSS3 实现灵动的动画 TAB 切换效果(DEMO)
Sep 15 HTML / CSS
利用 CSS3 实现的无缝轮播功能代码
Sep 25 HTML / CSS
用HTML5.0制作网页的教程
May 30 HTML / CSS
html5拍照功能实现代码(htm5上传文件)
Dec 11 HTML / CSS
深入剖析HTML5 内联框架iFrame
May 04 HTML / CSS
localStorage的过期时间设置的方法详解
Nov 26 HTML / CSS
canvas绘制图片drawImage使用方法
Sep 15 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
马来西亚购物网站(41) 俄罗斯购物网站(137) 瑞士购物网站(28) 法国购物网站(144) 日本购物网站(72) 印尼购物网站(37) 印度购物网站(45) 德国购物网站(227) 埃及购物网站(2) 墨西哥购物网站(16)
You might like
PHP中mb_convert_encoding与iconv函数的深入解析
2013/06/21 PHP
PHP利用str_replace防注入的方法
2013/11/10 PHP
php5.2 Json不能正确处理中文、GB编码的解决方法
2014/03/28 PHP
PHP抓取、分析国内视频网站的视频信息工具类
2014/04/02 PHP
php设计模式之单例模式实例分析
2015/02/25 PHP
PHP实现网站访问量计数器
2017/10/27 PHP
php workerman定时任务的实现代码
2018/12/23 PHP
xml转json的js代码
2012/08/28 Javascript
document.all的一个比较完整的总结及案例
2013/01/31 Javascript
js使下拉列表框可编辑不止是选择
2013/12/12 Javascript
jQuery实现鼠标划过添加和删除class的方法
2015/06/26 Javascript
jQuery each函数源码分析
2016/05/25 Javascript
js设置文字颜色的方法示例
2016/12/30 Javascript
js实现前端分页页码管理
2017/01/06 Javascript
详解vue-router 2.0 常用基础知识点之router.push()
2017/05/10 Javascript
layui table 表格上添加日期控件的两种方法
2019/09/28 Javascript
vue 路由子组件created和mounted不起作用的解决方法
2019/11/05 Javascript
详解搭建一个vue-cli的移动端H5开发模板
2020/01/17 Javascript
vue.js页面加载执行created,mounted的先后顺序说明
2020/11/07 Javascript
Python自定义scrapy中间模块避免重复采集的方法
2015/04/07 Python
Python实现对象转换为xml的方法示例
2017/06/08 Python
对Python中DataFrame按照行遍历的方法
2018/04/08 Python
使用Python进行QQ批量登录的实例代码
2018/06/11 Python
python的scikit-learn将特征转成one-hot特征的方法
2018/07/10 Python
pycharm中导入模块错误时提示Try to run this command from the system terminal
2020/03/26 Python
欧洲最大的美妆零售网站：Feelunique
2017/01/14 全球购物
菲律宾票务网站：StubHub菲律宾
2018/04/21 全球购物
会计专业自我鉴定范文
2013/10/06 职场文书
电气工程自动化求职信
2014/03/14 职场文书
表彰会主持词
2014/03/26 职场文书
爱国演讲稿400字
2014/05/07 职场文书
学校安全教育月活动总结
2014/07/07 职场文书
党建工作目标管理责任书
2015/01/29 职场文书
国庆庆典邀请函
2015/02/02 职场文书
行政处罚告知书
2015/07/01 职场文书
2016初一新生军训心得体会
2016/01/11 职场文书