首页
所有分类
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的flexbox实现水平垂直居中与三列等高布局
Sep 12 HTML / CSS
CSS3 倾斜的网页图片库实例教程
Nov 14 HTML / CSS
6种非常炫酷的CSS3按钮边框动画特效
Mar 16 HTML / CSS
利用CSS3实现开门效果实例源码
Aug 22 HTML / CSS
不可轻视HTML5！App三年内将被html5顶替彻底消失
Nov 18 HTML / CSS
使用HTML5进行SVG矢量图形绘制的入门教程
Feb 19 HTML / CSS
mui几种页面跳转方式对比总结概括
Aug 18 HTML / CSS
html+js 实现markdown编辑器效果
Oct 23 HTML / CSS
总结html5自定义属性有哪些
Apr 01 HTML / CSS
html5移动端自适应布局的实现
Apr 15 HTML / CSS
AmazeUI在模态框中嵌入表单形成模态输入框
Aug 20 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
GNN(1) #{}(1) 图片模糊(1) canvas(2) 选择器(1) SQL注入(2) flex-shrink(1) flex(1) 匹配文本(1) 代理(2)
You might like
提问的智慧
2006/10/09 PHP
纯真IP数据库的应用 IP地址转化成十进制
2009/06/14 PHP
yii2使用ajax返回json的实现方法
2016/05/14 PHP
PHP使用GD库输出汉字的方法【测试可用】
2016/11/10 PHP
JS简单实现元素复制示例附图
2013/11/19 Javascript
用jQuery向div中添加Html文本内容的简单实现
2016/07/13 Javascript
js单页hash路由原理与应用实战详解
2017/08/14 Javascript
vue和react等项目中更简单的实现展开收起更多等效果示例
2018/02/22 Javascript
vue文件树组件使用详解
2018/03/29 Javascript
深入理解JavaScript 中的执行上下文和执行栈
2018/10/23 Javascript
vue中选项卡点击切换且能滑动切换功能的实现代码
2018/11/25 Javascript
vue组件间通信六种方式（总结篇）
2019/05/15 Javascript
如何让Nodejs支持H5 History模式(connect-history-api-fallback源码分析)
2019/05/30 NodeJs
Vue在chrome44偶现点击子元素事件无法冒泡的解决方法
2019/12/15 Javascript
[01:01:51]EG vs VG Supermajor小组赛B组 BO3 第二场 6.2
2018/06/03 DOTA
跟老齐学Python之让人欢喜让人忧的迭代
2014/10/02 Python
Python基于回溯法子集树模板实现图的遍历功能示例
2017/09/05 Python
Python实现PS滤镜的旋转模糊功能示例
2018/01/20 Python
Django 实现下载文件功能的示例
2018/03/06 Python
用python统计代码行的示例(包括空行和注释)
2018/07/24 Python
Django框架设置cookies与获取cookies操作详解
2019/05/27 Python
Python Django 页面上展示固定的页码数实现代码
2019/08/21 Python
利用Python绘制有趣的万圣节南瓜怪效果
2019/10/31 Python
Pytorch 定义MyDatasets实现多通道分别输入不同数据方式
2020/01/15 Python
Bonami斯洛伐克：购买家具和家居饰品
2019/07/02 全球购物
电子技术专业中专生的自我评价
2013/12/17 职场文书
销售人员获奖感言
2014/02/05 职场文书
买卖协议书范本
2014/04/21 职场文书
平面设计专业求职信
2014/08/09 职场文书
机关驾驶员违规检讨书
2014/09/13 职场文书
处级干部反四风个人对照检查材料思想汇报
2014/09/27 职场文书
实践论读书笔记
2015/06/29 职场文书
《玩出了名堂》教学反思
2016/02/17 职场文书
小型企业的绩效考核制度模板
2019/11/21 职场文书
Jupyter notebook 不自动弹出网页的解决方案
2021/05/21 Python
Java中Quartz高可用定时任务快速入门
2022/04/03 Java/Android