首页
所有分类
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使用transition实现的鼠标悬停淡入淡出
Jan 09 HTML / CSS
CSS3实现文字波浪线效果示例代码
Nov 20 HTML / CSS
利用纯CSS3实现动态的自行车特效源码
Jan 20 HTML / CSS
总结30个CSS3选择器
Apr 13 HTML / CSS
10种CSS3实现的loading动画，挑一个走吧？
Nov 16 HTML / CSS
HTML5 本地存储实现购物车功能
Sep 07 HTML / CSS
html5文字阴影效果text-shadow使用示例
Jul 25 HTML / CSS
HTML5拖放效果的实现代码
Nov 17 HTML / CSS
canvas像素点操作之视频绿幕抠图
Sep 11 HTML / CSS
h5移动端调用支付宝、微信支付的实现
Jun 08 HTML / CSS
一个基于canvas的移动端图片编辑器的实现
Oct 28 HTML / CSS
关于CSS浮动与取消浮动的问题
Jun 28 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
android studio(3) 移动开发(2) 安卓(1) OpenLayer(1) 嵌套(1) 分块(1) 二维数组(2) 循环(3) IDEA(2) 查找算法(1)
You might like
DOTA2 探索永无止境 玩家自创强悍插眼攻略
2020/04/20 DOTA
图书管理程序（三）
2006/10/09 PHP
全新的PDO数据库操作类php版（仅适用Mysql）
2012/07/22 PHP
Laravel框架数据库CURD操作、连贯操作总结
2014/09/03 PHP
javascript 获取网页参数系统
2008/07/19 Javascript
ppk谈JavaScript style属性
2008/10/10 Javascript
table行随鼠标移动变色示例
2014/05/07 Javascript
jQuery控制网页打印指定区域的方法
2015/04/07 Javascript
jquery滚动特效集锦
2015/06/03 Javascript
javascript原型模式用法实例详解
2015/06/04 Javascript
Jsonp 关键字详解及json和jsonp的区别，ajax和jsonp的区别
2015/12/30 Javascript
AngularJS手动表单验证
2016/02/01 Javascript
Angularjs中如何使用filterFilter函数过滤
2016/02/06 Javascript
indexedDB bootstrap angularjs之 MVC DOMO (应用示例)
2016/06/20 Javascript
javascript实现循环广告条效果
2017/12/12 Javascript
Angular6 Filter实现页面搜索的示例代码
2018/12/02 Javascript
[01:45]2014DOTA2 TI预选赛预选赛 大神专访第二弹!
2014/05/20 DOTA
[49:54]Ti4 循环赛第三日 LGD vs Titan
2014/07/12 DOTA
Python实现从脚本里运行scrapy的方法
2015/04/07 Python
Python导入txt数据到mysql的方法
2015/04/08 Python
python 3利用Dlib 19.7实现摄像头人脸检测特征点标定
2018/02/26 Python
Python3之读取连接过的网络并定位的方法
2018/04/22 Python
python实现数据导出到excel的示例--普通格式
2018/05/03 Python
Python使用一行代码获取上个月是几月
2018/08/30 Python
Python、 Pycharm、Django安装详细教程(图文)
2019/04/12 Python
Python pandas用法最全整理
2019/08/04 Python
浅谈Pytorch中的torch.gather函数的含义
2019/08/18 Python
在TensorFlow中实现矩阵维度扩展
2020/05/22 Python
Python使用matplotlib绘制圆形代码实例
2020/05/27 Python
win10下python3.8的PIL库安装过程
2020/06/08 Python
Python爬虫headers处理及网络超时问题解决方案
2020/06/19 Python
HTML5为输入框添加语音输入功能的实现方法
2017/02/06 HTML / CSS
Desigual德国官网：在线购买原创服装
2018/03/27 全球购物
小学工作总结2015
2015/05/04 职场文书
5行Python代码实现一键批量扣图
2021/06/29 Python
Django+Nginx+uWSGI 定时任务的实现方法
2022/01/22 Python