首页
所有分类
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简单练习实现遨游浏览器logo的绘制
Jan 30 HTML / CSS
纯CSS改变webkit内核浏览器的滚动条样式
Apr 17 HTML / CSS
css3中transition属性详解
Sep 02 HTML / CSS
CSS3制作彩色进度条样式的代码示例分享
Jun 23 HTML / CSS
CSS3之2D与3D变换的实现方法
Jan 28 HTML / CSS
详解CSS3媒体查询响应式布局bootstrap 框架原理实战(推荐)
Nov 16 HTML / CSS
在HTML5 canvas里用卷积核进行图像处理的方法
May 02 HTML / CSS
有关HTML5页面在iPhoneX适配问题
Nov 13 HTML / CSS
小程序瀑布流解决左右两边高度差距过大的问题
Feb 20 HTML / CSS
AmazeUI 折叠面板的实现代码
Aug 17 HTML / CSS
浅析CSS在DevTools 中架构演变
Oct 05 HTML / CSS
CSS中理解层叠性及权重如何分配
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) 蓝牙(1) 虚拟键盘(1) 蓝牙耳机(1) Debian(1) RustDesk(1) 鸿蒙3.0(1) HarmonyOS(1) xhunter1.sys(1) 鸿蒙(2)
You might like
PHP ignore_user_abort函数详细介绍和使用实例
2014/07/15 PHP
PHP+MySQL实现模糊查询员工信息功能示例
2018/06/01 PHP
15款优秀的jQuery导航菜单插件分享
2011/07/19 Javascript
jquery获取tr中控件值并操作tr实现思路
2013/03/27 Javascript
js设置组合快捷键/tabindex功能的方法
2013/11/21 Javascript
JavaScript生成随机数的4种自定义函数分享
2015/02/28 Javascript
JavaScript返回0-1之间随机数的方法
2015/04/06 Javascript
javascript省市级联功能实现方法实例详解
2015/10/20 Javascript
js实现字符全排列算法的简单方法
2017/05/01 Javascript
JS继承与闭包及JS实现继承的三种方式
2017/10/15 Javascript
React Native自定义控件底部抽屉菜单的示例
2018/02/08 Javascript
解决vue移动端适配问题
2018/12/12 Javascript
[01:06]DOTA2隆重推出2016冬季勇士令状 内含上海特级锦标赛互动指南
2016/02/17 DOTA
[02:33]2018 DOTA2亚洲邀请赛回顾视频 再次拾起那些美妙的时刻
2018/04/10 DOTA
Python 40行代码实现人脸识别功能
2017/04/02 Python
python判断字符串是否是json格式方法分享
2017/11/07 Python
Python从数据库读取大量数据批量写入文件的方法
2018/12/10 Python
对Python多线程读写文件加锁的实例详解
2019/01/14 Python
python实现在函数中修改变量值的方法
2019/07/16 Python
利用rest framework搭建Django API过程解析
2019/08/31 Python
Pytest如何使用skip跳过执行测试
2020/08/13 Python
详解CSS3选择器的使用方法汇总
2015/11/24 HTML / CSS
详解CSS3浏览器兼容
2016/12/14 HTML / CSS
Html5 webview元素定位工具的实现
2020/08/07 HTML / CSS
番木瓜健康和保健产品第一大制造商：Herbal Papaya
2017/04/25 全球购物
日本最大级玩偶手办购物：あみあみ Amiami
2018/04/23 全球购物
Java面试题：说出如下代码的执行结果
2015/10/30 面试题
环境工程大学生个人的自我评价
2013/10/08 职场文书
自我评价范文分享
2014/01/04 职场文书
学习经验交流会主持词
2014/04/01 职场文书
甜品店创业计划书
2014/08/14 职场文书
爱的承诺书
2015/01/20 职场文书
2015年银行员工工作总结
2015/04/24 职场文书
解决golang post文件时Content-Type出现的问题
2021/05/02 Golang
SpringBoot整合RabbitMQ的5种模式实战
2021/08/02 Java/Android
进阶篇之linux环境下安装MySQL数据库
2022/04/09 MySQL