首页
所有分类
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教程(9):设置RGB颜色
Apr 02 HTML / CSS
CSS3 中的@keyframes介绍
Sep 02 HTML / CSS
CSS3制作酷炫的三维相册效果
Jul 01 HTML / CSS
关于前端上传文件全面基础扫盲贴（入门）
Aug 01 HTML / CSS
HTML5的结构和语义(2):结构
Oct 17 HTML / CSS
html5 canvas绘制矩形和圆形的实例代码
Jun 16 HTML / CSS
HTML5新增加标签和功能概述
Sep 05 HTML / CSS
HTML5 视频播放(video),JavaScript控制视频的实例代码
Oct 08 HTML / CSS
详解三种方式实现平滑滚动页面到顶部的功能
Apr 23 HTML / CSS
Ratchet 模态框的实现
Aug 19 HTML / CSS
为什么你写的height:100%不起作用
May 10 HTML / CSS
详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)
Jul 01 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) HashSet集合(1) OutputStream(1) persistedstate(1) InputStream(1) Vue(10) Storage(1) vuex(1) axios(1) Set接口(1)
You might like
PHP个人网站架设连环讲(二)
2006/10/09 PHP
PHP实现通过URL提取根域名
2016/03/31 PHP
php进行ip地址掩码运算处理的方法
2016/07/11 PHP
PHP下 Mongodb 连接远程数据库的实例代码
2017/08/30 PHP
Mac系统下安装PHP Xdebug
2018/03/30 PHP
PHP使用openssl扩展实现加解密方法示例
2020/02/20 PHP
Sample script that displays all of the users in a given SQL Server DB
2007/06/16 Javascript
ExtJS Store的数据访问与更新问题
2010/04/28 Javascript
用innerhtml提高页面打开速度的方法
2013/08/02 Javascript
javascript使用isNaN()函数判断变量是否为数字
2013/09/21 Javascript
JQuery中使用Ajax赋值给全局变量异常的解决方法
2014/01/10 Javascript
js监听滚动条滚动事件使得某个标签内容始终位于同一位置
2014/01/24 Javascript
jQuery中is()方法用法实例
2015/01/06 Javascript
[原创]JQuery 在表单提交之前修改 提交的值
2016/04/14 Javascript
用file标签实现多图文件上传预览
2017/02/14 Javascript
Node.Js生成比特币地址代码解析
2018/04/21 Javascript
JS实现的哈夫曼编码示例【原始版与修改版】
2018/04/22 Javascript
改变layer confirm弹窗按钮的颜色方法
2019/09/12 Javascript
[01:10]DOTA2次级职业联赛 - U5战队宣传片
2014/12/01 DOTA
Python 调用DLL操作抄表机
2009/01/12 Python
python基础教程之udp端口扫描
2014/02/10 Python
编写Python脚本来获取mp3文件tag信息的教程
2015/05/04 Python
python基于multiprocessing的多进程创建方法
2015/06/04 Python
python实现自动登录人人网并采集信息的方法
2015/06/28 Python
Python线程创建和终止实例代码
2018/01/20 Python
在Pandas中给多层索引降级的方法
2018/11/16 Python
Flask教程之重定向与错误处理实例分析
2019/08/01 Python
基于python全局设置id 自动化测试元素定位过程解析
2019/09/04 Python
Django 解决新建表删除后无法重新创建等问题
2020/05/21 Python
使用CSS3实现多列布局与多背景的技巧
2016/02/29 HTML / CSS
几个常见的软件测试问题
2016/09/07 面试题
关于读书的活动方案
2014/08/14 职场文书
小学红领巾广播稿（3篇）
2014/09/13 职场文书
个人师德师风自我剖析材料
2014/09/29 职场文书
Navicat连接MySQL错误描述分析
2021/06/02 MySQL
整理Python中常用的conda命令操作
2021/06/15 Python