首页
所有分类
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线性渐变简单实现以及该属性在浏览器中的不同
Dec 12 HTML / CSS
css3打造一款漂亮的卡哇伊按钮
Mar 20 HTML / CSS
css3隔行变换色实现示例
Feb 19 HTML / CSS
CSS3制作缩略图的详细过程
Jul 08 HTML / CSS
CSS3按钮鼠标悬浮实现光圈效果源码
Sep 11 HTML / CSS
video结合canvas实现视频在线截图功能
Jun 25 HTML / CSS
HTML5验证以及日期显示的实现详解
Jul 05 HTML / CSS
探索HTML5本地存储功能运用技巧
Mar 02 HTML / CSS
HTML5表单验证特性(知识点小结)
Mar 10 HTML / CSS
前后端结合实现amazeUI分页效果
Aug 21 HTML / CSS
html+css实现文字折叠特效实例
Jun 02 HTML / CSS
纯html+css实现打字效果
Aug 02 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) 海燕B411(1) 修复(2) PL-365(1) TECSUN(1) 接收机(2) DSP(2) 电子管(5) 东方红(1) 德生(17)
You might like
提升PHP执行速度全攻略(下)
2006/10/09 PHP
phpphp图片采集后按原路径保存图片示例
2014/02/18 PHP
php格式输出文件var_export函数实例
2014/11/15 PHP
php获取手机端的号码以及ip地址实例代码
2018/09/12 PHP
使用Entrust扩展包在laravel 中实现RBAC的功能
2020/03/16 PHP
Jquery增加鼠标中间功能mousewheel的实例代码
2013/09/05 Javascript
javascript打开word文档的方法
2014/04/16 Javascript
jQuery获取动态生成的元素示例
2014/06/15 Javascript
JavaScript设计模式之装饰者模式介绍
2014/12/28 Javascript
JS实现控制表格单元格垂直对齐的方法
2015/03/30 Javascript
JS中call/apply、arguments、undefined/null方法详解
2016/02/15 Javascript
Node.js+Express配置入门教程
2016/05/19 Javascript
jquery.masonry瀑布流效果
2017/05/25 jQuery
使用JavaScript实现点击循环切换图片效果
2017/09/03 Javascript
用node开发并发布一个cli工具的方法步骤
2019/01/03 Javascript
最全vue的vue-amap使用高德地图插件画多边形范围的示例代码
2020/07/17 Javascript
[02:12]探秘2016国际邀请赛中国区预选赛选手房间
2016/06/25 DOTA
[00:12]2018DOTA2亚洲邀请赛SOLO赛 MidOne是否中单第一人？
2018/04/05 DOTA
django定期执行任务(实例讲解)
2017/11/03 Python
numpy.std() 计算矩阵标准差的方法
2018/07/11 Python
python实现连续图文识别
2018/12/18 Python
调用其他python脚本文件里面的类和方法过程解析
2019/11/15 Python
python如何实现不用装饰器实现登陆器小程序
2019/12/14 Python
TensorFlow基本的常量、变量和运算操作详解
2020/02/03 Python
Python列表的深复制和浅复制示例详解
2021/02/12 Python
CSS3 Pie工具推荐--让IE6-8支持一些优秀的CSS3特性
2014/09/02 HTML / CSS
Ootori在线按摩椅店：一家专业的按摩椅制造商
2019/04/10 全球购物
Linux的主要特性
2016/09/03 面试题
大学教师年终总结的自我评价
2013/10/29 职场文书
行政专员的岗位职责
2014/03/10 职场文书
房屋买卖协议书范本
2014/09/27 职场文书
门面房租房协议书
2014/12/01 职场文书
春节随笔
2015/08/15 职场文书
导游词之云南-元阳梯田
2019/10/08 职场文书
浅谈vue2的$refs在vue3组合式API中的替代方法
2021/04/18 Vue.js
使用Redis实现秒杀功能的简单方法
2021/05/08 Redis