rotate默认是rotateZ

也就是默认在Z轴旋转，

rotate(度数),rotateX(度数),rotateY(度数),

度数的正负分别代表顺逆时针,观察角度是各个轴的正方向

坐标系原点在左上角

x轴的正方向是向右

y轴正方向是向下

z轴正方向是从屏幕到人的眼睛(垂直)

比如rotateX(80deg)和rotateX(-80deg)区别就是：从x轴正方向看向物体，80deg就是顺时针旋转了80度，-80deg就是逆时针旋转了80度

时间： 2024-10-08 22:52:41

rotate默认是rotateZ的相关文章

CSS3 transform 属性详解(skew, rotate, translate, scale)

写这篇文章是因为在一个前端QQ群里,网友 "小豆豆" (应他要求要出现他的网名......) ,问skew的角度怎么算,因为他看了很多文章还是不能理解skew的原理.于是,我觉得有必要写个博文,帮助那些不懂的人,让他们看了此文就懂. 进入正题: 先说明下,电脑屏幕的XY轴跟我们平时所说的直角坐标系是不一样的.如下图: 图上的盒子就是代表我们的电脑屏幕,原点就是屏幕的左上角,竖直向下为X轴正方向,水平向右为Y轴正方向. 1.倾斜skew 先看图每个图下方都有skew的参数.粗的红色的线

我的CSS3学习笔记

1.元字符使用: []: 全部可选项 ||:并列 |:多选一 ?: 0个或者一个 *:0个或者多个 {}: 范围 2.CSS3属性选择器: E[attr]:存在attr属性即可: E[attr=val]:属性值完全等于val E[attr*=val]:属性值里包含val字符并且在"任意"位置 E[attr^=val]:属性值里包含val字符并且在"开始"位置 E[attr$=val]:属性值里包含val字符并且在"结束"位置 3.CSS3伪类选择

React Native动画-Animated

动画类型: spring:基础的单次弹跳物理模型 timing:从时间范围映射到渐变的值 decay:以一个初始速度开始并且逐渐减慢停止创建动画的参数: value:AnimatedValue | AnimatedValueXY(X轴或Y轴 | X轴和Y轴) config:SpringAnimationConfig | TimingAnimationConfig | DecayAnimationConfig(动画的参数配置) 值类型: AnimatedValue:单个值 AnimatedVal

前端总结·基础篇·CSS

前端总结·基础篇·CSS 1 常用重置+重置插件(Normalize.css,IE8+) * {box-sizing:border-box;} /* IE8+ */body {margin:0;} /* 去除边距 */ul {margin:0;padding-left:0;} /* 去除边距和左填充 */li {list-style-type:none;} /* 去除列表的圆点 */a {text-decoration:none;} /* 去除下划线 */ 2 浏览器前缀 { tran

hammer.js中文文档

转自:http://www.uedsc.com/hammerjs-api.html HammerJS是一个优秀的.轻量级的触屏设备手势库,现在已经更新到2.04版本,跟1.0版本有点天壤地别了,毕竟改写了事件名并新增了许多方法,允许同时监听多个手势.自定义识别器,也可以识别滑动方向. 不过对于新版本的hammerJS却及其匮乏中文指引文档,就着这一点我还是上官网翻译下英文文档,写一篇跟大家分享吧(其实hammer的API写的很不怎样,内容和排版都很马虎了事,建议先仔细研究examples后再查阅

【CSS3】loading动画

HTML: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>loading</title> </head> <body> <div> <ul> <li></li> <li></li> <li><

canvas and css3分别实现旋转效果

<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } .wrap,canvas{ width: 200px; position: relative; height: 200px; background:

移动端手势库hammerJS 2.0.4官方文档翻译

hammerJS是一个优秀的.轻量级的触屏设备手势库,现在已经更新到2.04版本,跟1.0版本有点天壤地别了,毕竟改写了事件名并新增了许多方法,允许同时监听多个手势.自定义识别器,也可以识别滑动方向. 不过对于新版本的hammerJS却及其匮乏中文指引文档,就着这一点我还是上官网翻译下英文文档,写一篇跟大家分享吧(其实hammer的API写的很不怎样,内容和排版都很马虎了事,建议先仔细研究examples后再查阅.你也可以通过Aaron猪肉荣的Hammer系列文章来学习). 注:本文将所有API

CSS3仿LOGO图片阴影特效

又一个CSS3阴影效果,个人感觉CSS3的阴影比传统的CSS滤镜实现的阴影更生动,阴影可以是无规则的,而且阴影的大小也是随时变化的,本例子就是用CSs3写成一个Logo,然后再加以阴影特效,重点不是展示阴影效果有多漂亮,而是如何去实现这种CSS3效果. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transit