首页
所有分类
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实现炫酷的飞机起飞动画
Sep 17 HTML / CSS
CSS3实战第一波 让我们尽情的圆角吧
Aug 27 HTML / CSS
实现CSS3中的border-radius(边框圆角)示例代码
Jul 19 HTML / CSS
css3实现3D色子翻转特效
Dec 23 HTML / CSS
css3编写浏览器背景渐变背景色的方法
Mar 05 HTML / CSS
HTML5应用之文件上传
Dec 30 HTML / CSS
HTML5之HTML元素扩展(上)—新增加的元素及使用概述
Jan 31 HTML / CSS
利用HTML5的新特点实现图片文件异步上传
May 29 HTML / CSS
详解HTML5 Canvas绘制不规则图形时的非零环绕原则
Mar 21 HTML / CSS
HTML5新特性 多线程（Worker SharedWorker）
Apr 24 HTML / CSS
Html5 Canvas动画基础碰撞检测的实现
Dec 06 HTML / CSS
关于HTML编码导致的乱码问题
Sep 04 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) 慢日志(1) cmd(1) Mint UI(1) Switch(1) mt-swipe(1) exists(2) 相对路径(1) 远程桌面(2) REST(1)
You might like
PHP使用get_headers函数判断远程文件是否存在的方法
2014/11/28 PHP
Zend Framework框架之Zend_Mail实现发送Email邮件验证功能及解决标题乱码的方法
2016/03/21 PHP
php+mysql开发的最简单在线题库(在线做题系统)完整案例
2019/03/30 PHP
Extjs列表详细信息窗口新建后自动加载解决方法
2010/04/02 Javascript
页面加载完后自动执行一个方法的js代码
2014/09/06 Javascript
js拆分字符串并将分割的数据放到数组中的方法
2015/05/06 Javascript
微信小程序 Audio API详解及实例代码
2016/09/30 Javascript
express框架实现基于Websocket建立的简易聊天室
2017/08/10 Javascript
用JS实现根据当前时间随机生成流水号或者订单号
2018/05/31 Javascript
vue.js2.0 实现better-scroll的滚动效果实例详解
2018/08/13 Javascript
对angular2中的ngfor和ngif指令嵌套实例讲解
2018/09/12 Javascript
vue动态设置img的src路径实例
2018/09/18 Javascript
vue.js引入外部CSS样式和外部JS文件的方法
2019/01/06 Javascript
vue实现拖拽的简单案例 不超出可视区域
2019/07/25 Javascript
[02:18]《我与DAC》之工作人员：为了热爱DOTA2的玩家们
2018/03/28 DOTA
[49:07]VGJ.T vs Optic Supermajor小组赛D组 BO3 第二场 6.3
2018/06/04 DOTA
Python抓取淘宝下拉框关键词的方法
2015/07/08 Python
举例讲解Python设计模式编程中的访问者与观察者模式
2016/01/26 Python
Centos Python2 升级到Python3的简单实现
2016/06/21 Python
python判断字符串编码的简单实现方法(使用chardet)
2016/07/01 Python
python学习笔记--将python源文件打包成exe文件(pyinstaller)
2018/05/26 Python
python实现录音小程序
2020/10/26 Python
PyQt5实现让QScrollArea支持鼠标拖动的操作方法
2019/06/19 Python
使用Python给头像戴上圣诞帽的图像操作过程解析
2019/09/20 Python
python使用pygame实现笑脸乒乓球弹珠球游戏
2019/11/25 Python
解决pycharm下pyuic工具使用的问题
2020/04/08 Python
LN-CC日本：高端男装和女装的奢侈时尚目的地
2019/09/01 全球购物
一份Java笔试题
2012/02/21 面试题
说说在weblogic中开发消息Bean时的persistent与non-persisten的差别
2013/04/07 面试题
什么是组件架构
2016/05/15 面试题
人力资源经理的岗位职责
2014/03/02 职场文书
成立公司计划书
2014/05/07 职场文书
关于工作时间玩手机的检讨书
2014/09/18 职场文书
2015年教师节贺卡寄语
2015/03/24 职场文书
情人节单身感言
2015/08/03 职场文书
springboot实现string转json json里面带数组
2022/06/16 Java/Android