首页
所有分类
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，js）
Dec 12 HTML / CSS
CSS3模块的目前的状况分析
Feb 24 HTML / CSS
纯CSS3实现带动画效果导航菜单无需js
Sep 27 HTML / CSS
纯CSS3打造动感漂亮时尚的扇形菜单
Mar 18 HTML / CSS
纯css3实现鼠标经过图片显示描述的动画效果
Sep 01 HTML / CSS
支持IE8的纯css3开发的响应式设计动画菜单教程
Nov 05 HTML / CSS
css3实例教程 一款纯css3实现的发光屏幕旋转特效
Dec 07 HTML / CSS
CSS3 二级导航菜单的制作的示例
Apr 02 HTML / CSS
如何使用css3实现一个类在线直播的队列动画的示例代码
Jun 17 HTML / CSS
css3利用transform变形结合事件完成扇形导航
Oct 26 HTML / CSS
HTML5 Web 存储详解
Sep 16 HTML / CSS
HTML5本地存储和本地数据库实例详解
Sep 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
Scheduled(1) NumPy(2) RTMP(1) 模拟登录(1) TypeScript(2) text-shadow(1) keeplive_timeout(1) 双向链表(6) 单向链表(1) 区块链(2)
You might like
php cookie名使用点号(句号)会被转换
2014/10/23 PHP
PHP基于堆栈实现的高级计算器功能示例
2017/09/15 PHP
PHP实现的AES加密、解密封装类与用法示例
2018/08/02 PHP
js常用代码段收集
2011/10/28 Javascript
window.parent与window.openner区别介绍
2012/04/12 Javascript
jquery点击页面任何区域实现鼠标焦点十字效果
2013/06/21 Javascript
jQuery的文档处理程序详解
2016/05/10 Javascript
AngularJS入门教程之服务(Service)
2016/07/27 Javascript
BootStrapValidator校验方式
2016/12/19 Javascript
原生JS实现简单放大镜效果
2017/02/08 Javascript
详解vuex 中的 state 在组件中如何监听
2017/05/23 Javascript
nodejs实现超简单生成二维码的方法
2018/03/17 NodeJs
React Form组件的实现封装杂谈
2018/05/07 Javascript
利用es6 new.target来对模拟抽象类的方法
2019/05/10 Javascript
Vue.js路由实现选项卡简单实例
2019/07/24 Javascript
vue下拉刷新组件的开发及slot的使用详解
2020/12/23 Vue.js
[01:33]PWL开团时刻DAY2-开雾与反开雾
2020/10/31 DOTA
python在多玩图片上下载妹子图的实现代码
2013/08/13 Python
Django中的CACHE_BACKEND参数和站点级Cache设置
2015/07/23 Python
使用Python的Flask框架来搭建第一个Web应用程序
2016/06/04 Python
Python中在for循环中嵌套使用if和else语句的技巧
2016/06/20 Python
python自动化脚本安装指定版本python环境详解
2017/09/14 Python
用Python分析3天破10亿的《我不是药神》到底神在哪?
2018/07/12 Python
Django Python 获取请求头信息Content-Range的方法
2019/08/06 Python
Python3获取cookie常用三种方案
2020/10/05 Python
Python tkinter之Bind（绑定事件）的使用示例
2021/02/05 Python
HTML5 背景的显示区域实现
2020/07/09 HTML / CSS
Otticanet美国：最顶尖的世界名牌眼镜, 能得到打折季的价格
2019/03/10 全球购物
香港演唱会订票网站：StubHub香港
2019/10/10 全球购物
外语学院毕业生的自我鉴定
2013/11/28 职场文书
大学生文员专业个人求职信范文
2014/01/05 职场文书
公开服务承诺制度
2014/03/26 职场文书
电力培训心得体会
2014/09/02 职场文书
财务助理岗位职责范本
2014/10/09 职场文书
2014年法院工作总结
2014/11/24 职场文书
golang通过递归遍历生成树状结构的操作
2021/04/28 Golang