首页
所有分类
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 相关文章推荐
CSS实现的一闪而过的图片闪光效果
Apr 23 HTML / CSS
css3实现的多级渐变下拉菜单导航效果代码
Aug 31 HTML / CSS
使用CSS3来代替JS实现交互
Aug 10 HTML / CSS
html5 sessionStorage会话存储_动力节点Java学院整理
Jul 06 HTML / CSS
HTML5 使用 sessionStorage 进行页面传值的方法
Jul 02 HTML / CSS
HTML5实现的震撼3D焦点图动画的示例代码
Sep 26 HTML / CSS
canvas学习笔记之2d画布基础的实现
Feb 21 HTML / CSS
关于HTML5你必须知道的28个新特性,新技巧以及新技术
May 28 HTML / CSS
html5 application cache遇到的严重问题
Dec 26 HTML / CSS
Html5之自定义属性(data-,dataset)
Nov 19 HTML / CSS
HTML5实现直播间评论滚动效果的代码
May 27 HTML / CSS
Html5 webRTC简单实现视频调用的示例代码
Sep 23 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
肯尼亚购物网站(2) 丹麦购物网站(22) 阿根廷购物网站(9) 挪威购物网站(7) 澳大利亚购物网站(309) 芬兰购物网站(10) 意大利购物网站(128) 比利时购物网站(33) 瑞典购物网站(55) 南非购物网站(8)
You might like
PHP入门之常量简介和系统常量
2014/05/12 PHP
php post json参数的传递和接收处理方法
2018/05/31 PHP
网站页面自动跳转实现方法PHP、JSP（下）
2010/08/01 Javascript
js弹出窗口之弹出层的小例子
2013/06/17 Javascript
jquery链式操作的正确使用方法
2014/01/06 Javascript
JavaScript作用域链示例分享
2014/05/27 Javascript
javascript自定义in_array()函数实现方法
2015/08/03 Javascript
angular中实现控制器之间传递参数的方式
2017/04/24 Javascript
Javascript防止图片拉伸的自适应处理方法
2017/12/26 Javascript
vue 动态修改a标签的样式的方法
2018/01/18 Javascript
浅谈vuepress 踩坑记
2018/04/18 Javascript
nodejs前端模板引擎swig入门详解
2018/05/15 NodeJs
ES6 Proxy实现Vue的变化检测问题
2019/06/11 Javascript
vue-cli history模式实现tomcat部署报404的解决方式
2019/09/06 Javascript
Node.js设置定时任务之node-schedule模块的使用详解
2020/04/28 Javascript
vue-socket.io接收不到数据问题的解决方法
2020/05/13 Javascript
详解vue v-model
2020/08/31 Javascript
解决VUE项目使用Element-ui 下拉组件的验证失效问题
2020/11/07 Javascript
Python实现的选择排序算法示例
2017/11/29 Python
Python反射和内置方法重写操作详解
2018/08/27 Python
python3对接mysql数据库实例详解
2019/04/30 Python
python对数组进行排序,并输出排序后对应的索引值方式
2020/02/28 Python
浅谈Python __init__.py的作用
2020/10/28 Python
CSS3弹性盒模型flex box快速入门心得(必看篇)
2016/05/24 HTML / CSS
骆驼官方商城：CAMEL
2016/11/22 全球购物
美国眼镜网站：EyeBuyDirect
2017/04/13 全球购物
办理信用卡工作证明
2014/01/11 职场文书
旷课检讨书1000字
2014/02/14 职场文书
大学生未来职业生涯规划书
2014/02/15 职场文书
安全生产责任书
2014/03/12 职场文书
产品开发计划书
2014/04/27 职场文书
校运会宣传稿大全
2015/07/23 职场文书
90条交通安全宣传标语
2019/10/12 职场文书
详细了解MVC+proxy
2021/07/09 Java/Android
Mysql查询时间区间日期列表，不会由于数据表数据影响
2022/04/19 MySQL
Python实现对齐打印 format函数的用法
2022/04/28 Python