首页
所有分类
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实现div从下往上滑入滑出效果示例
Apr 28 HTML / CSS
html5使用Canvas绘图的使用方法
Nov 21 HTML / CSS
HTML5 实现一个访问本地文件的实例
Dec 13 HTML / CSS
html5拍照功能实现代码(htm5上传文件)
Dec 11 HTML / CSS
HTML5 Canvas中使用路径描画二阶、三阶贝塞尔曲线
Jan 01 HTML / CSS
h5调用摄像头的实现方法
Jun 01 HTML / CSS
HTML5和CSS3实例教程总结(推荐)
Jul 18 HTML / CSS
详解HTML5之pushstate、popstate操作history,无刷新改变当前url
Mar 15 HTML / CSS
canvas之自定义头像功能实现代码示例
Sep 29 HTML / CSS
HTML5声音录制/播放功能的实现代码
May 03 HTML / CSS
详解盒子端CSS动画性能提升
May 24 HTML / CSS
CSS使用Flex和Grid布局实现3D骰子
Aug 05 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) router(1) Scheduled(1) 扫雷(1) NumPy(2) 单向链表(1) Date(1) 双向链表(6) 区块链(2)
You might like
PHP中error_reporting()用法详解
2015/08/31 PHP
laravel通用化的CURD的实现
2019/12/13 PHP
浅谈$(document)和$(window)的区别
2015/07/15 Javascript
原生javascript实现分享到朋友圈功能 支持ios和android
2016/05/11 Javascript
JS未跨域操作iframe里的DOM
2016/06/01 Javascript
简单理解js的prototype属性及使用
2016/12/07 Javascript
微信小程序 图片边框解决方法
2017/01/16 Javascript
Javascript中for循环语句的几种写法总结对比
2017/01/23 Javascript
nodejs模块nodemailer基本使用-邮件发送示例(支持附件)
2017/03/28 NodeJs
JavaScript简单计算人的年龄示例
2017/04/15 Javascript
JavaScript创建对象_动力节点Java学院整理
2017/06/27 Javascript
浅谈Webpack 是如何加载模块的
2018/05/24 Javascript
js实现移动端轮播图
2020/12/21 Javascript
jQuery内容过滤选择器与子元素过滤选择器用法实例分析
2019/02/20 jQuery
微信小程序swiper组件实现抖音翻页切换视频功能的实例代码
2020/06/24 Javascript
[01:18]DOTA2超级联赛专访hanci ForLove淘汰感言曝光
2013/06/04 DOTA
[01:02:20]Mineski vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
Python设计模式之职责链模式原理与用法实例分析
2019/01/11 Python
python3 mmh3安装及使用方法
2019/10/09 Python
python 解决cv2绘制中文乱码问题
2019/12/23 Python
python使用docx模块读写docx文件的方法与docx模块常用方法详解
2020/02/17 Python
pycharm全局搜索的具体步骤
2020/07/28 Python
用python实现一个简单的验证码
2020/12/09 Python
css3.0 图形构成实例练习一
2013/03/19 HTML / CSS
英国最大的在线照明商店：Litecraft
2020/08/31 全球购物
接口中的方法可以是abstract的吗
2015/07/23 面试题
建筑工程技术应届生求职信
2013/11/17 职场文书
污水厂厂长岗位职责
2014/01/04 职场文书
优秀护士获奖感言
2014/02/20 职场文书
材料工程专业毕业生求职信
2014/03/04 职场文书
《英英学古诗》教学反思
2014/04/11 职场文书
2015年毕业生自我鉴定模板
2014/09/19 职场文书
店铺转让协议书（2014版）
2014/09/23 职场文书
2014年单位工作总结范文
2014/11/27 职场文书
2014年卫生院工作总结
2014/12/03 职场文书
2015年党员干部承诺书
2015/01/21 职场文书