首页
所有分类
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代码实现switch滑动开关按钮效果
Aug 30 HTML / CSS
HTML5 Canvas标签使用收录
Jul 07 HTML / CSS
HTML5的标签的代码的简单介绍 HTML5标签的简介
May 28 HTML / CSS
基于html5 canvas实现漫天飞雪效果实例
Sep 10 HTML / CSS
HTML5到底会有什么发展?HTML5的前景展望
Jul 07 HTML / CSS
Html5 APP中监听返回事件处理的方法示例
Mar 15 HTML / CSS
浅谈移动端网页图片预加载方案
Nov 05 HTML / CSS
详解通过focusout事件解决IOS键盘收起时界面不归位的问题
Jul 18 HTML / CSS
解决HTML5中的audio在手机端和微信端的不能自动播放问题
Nov 04 HTML / CSS
HTML5实现移动端点击翻牌功能
Oct 23 HTML / CSS
CSS使用伪类控制边框长度的方法
Jan 18 HTML / CSS
HTML页面点击按钮关闭页面的多种方式
Dec 24 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) json_extract(1) 变量提升(1) 缓冲区(1) 类加载器(1) netty(1) NoSQL(1) JOIN(1) form表单(1) Launch Mode(1)
You might like
php网页标题中文乱码的有效解决方法
2014/03/05 PHP
微信 getAccessToken方法详解及实例
2016/11/23 PHP
php+redis实现注册、删除、编辑、分页、登录、关注等功能示例
2017/02/15 PHP
PHP实现的无限分类类库定义与用法示例【基于thinkPHP】
2018/08/06 PHP
jquery 读取页面load get post ajax 四种方式代码写法
2011/04/02 Javascript
前端轻量级MVC框架CanJS详解
2014/09/26 Javascript
Node.js事件驱动
2015/06/18 Javascript
浅析四种常见的Javascript声明循环变量的书写方式
2015/10/14 Javascript
使用jquery获取url及url参数的简单实例
2016/06/14 Javascript
在Web项目中引入Jquery插件报错的完美解决方案(图解)
2016/09/19 Javascript
微信小程序 form组件详解及简单实例
2017/01/10 Javascript
Angular 2 利用Router事件和Title实现动态页面标题的方法
2017/08/23 Javascript
canvas轨迹回放功能实现
2017/12/20 Javascript
Bootstrap treeview实现动态加载数据并添加快捷搜索功能
2018/01/07 Javascript
解决Jquery下拉框数据动态获取的问题
2018/01/25 jQuery
Vue.js 中的 v-show 指令及用法详解
2018/11/19 Javascript
JS实现数组去重,显示重复元素及个数的方法示例
2019/01/21 Javascript
jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】
2019/06/06 jQuery
在layui.use 中自定义 function 的正确方法
2019/09/16 Javascript
javascript实现前端input密码输入强度验证
2020/06/24 Javascript
利用js实现简易红绿灯
2020/10/15 Javascript
Python编程中对super函数的正确理解和用法解析
2016/07/02 Python
利用aardio给python编写图形界面
2017/08/21 Python
tensorflow 获取模型所有参数总和数量的方法
2018/06/14 Python
Python如何爬取微信公众号文章和评论(基于 Fiddler 抓包分析)
2019/06/28 Python
使用 python pyautogui实现鼠标键盘控制功能
2019/08/04 Python
Python数据可视化：箱线图多种库画法
2019/11/06 Python
意大利在线药房：shop-farmacia.it
2019/03/12 全球购物
三星印度官网：Samsung印度
2019/08/03 全球购物
社区八一活动方案
2014/02/03 职场文书
致跳高运动员加油稿
2014/02/12 职场文书
安全生产目标责任书
2014/04/14 职场文书
我的中国梦演讲稿800字
2014/08/19 职场文书
幼儿园推普周活动总结
2015/05/07 职场文书
青年干部培训班学习心得体会
2016/01/06 职场文书
教师网络培训心得体会
2016/01/09 职场文书