CSS角度单位:deg、grad、rad、turn

1、deg

度(Degress)。一个圆共360度

90deg = 100grad = 0.25turn ≈ 1.570796326794897rad

-moz-transform: rotate(2deg);
-webkit-transform: rotate(2deg);
transform: rotate(2deg);
2、grad
梯度(Gradians)。一个圆共400梯度

90deg = 100grad = 0.25turn ≈ 1.570796326794897rad

-moz-transform: rotate(2grad);
-webkit-transform: rotate(2grad);
transform: rotate(2grad);
3、rad
弧度(Radians)。一个圆共2π弧度

90deg = 100grad = 0.25turn ≈ 1.570796326794897rad

-moz-transform: rotate(2rad);
-webkit-transform: rotate(2rad);
transform: rotate(2rad);
4、turn
转、圈(Turns)。一个圆共1圈

90deg = 100grad = 0.25turn ≈ 1.570796326794897rad

-webkit-transform: rotate(.5turn);
transform: rotate(.5turn);

————————————————
版权声明:本文为CSDN博主「Liyuxinger」的原创文章,遵循CC 4.0 by-sa版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/liyuxing6639801/article/details/70941569

原文地址:https://www.cnblogs.com/cangqinglang/p/11387477.html

时间: 2024-10-10 05:57:00

CSS角度单位:deg、grad、rad、turn的相关文章

CSS/CSS3长度、时间、频率、角度单位大全

一.一笔带过的前言 CSS中凡是牵扯到数值的基本上都与单位相关联,例如: .test{width:180px;} 平时我们再制作页面的时候用到的单位也就那么几个,而实际上CSS中的可用单位的数量多得惊人,尤其CSS3的出现更壮大了CSS单位家族.而本文就是简单展示下这些值这些单位. 二.CSS长度值 废话就不说了,直接参见下表: 单位 含义 em 相对于父元素的字体大小 ex 相对于小写字母"x"的高度 gd 一般用在东亚字体排版上,这个与英文并无关系 rem 相对于根元素字体大小 v

css之单位

css之单位 角度<angle> 用于<gradient>s和某些transform功能中 deg表示以度为单位的角度.一整圈就是360deg. 例如:0deg,90deg,14.23deg. grad用渐变表示角度.一整圈就是400grad. 例如:0grad,100grad,38.8grad.rad表示以弧度表示的角度. 一个完整的圆是2π弧度,近似于6.2832rad.1rad是180 /π度. 例如:0rad,1.0708rad,6.2832rad.turn表示一个转数的角

学习CSS了解单位em和px的区别

学习CSS了解单位em和px的区别 2007-11-11 20:17:25  来源:网页教学网收集整理 这里引用的是Jorux的“95%的中国网站需要重写CSS”的文章,题目有点吓人,但是确实是现在国内网页制作方面的一些缺陷.我一直也搞不清楚px与em之间的关系和特点,看过以后确实收获很大.平时都是用px来定义字体,所以无法用浏览器字体放大的功能,而国外大多数网站都可以在IE下使用.因为 1. IE无法调整那些使用px作为单位的字体大小:2. 国外的大部分网站能够调整的原因在于其使用了em作为字

移动H5开发入门知识,CSS的单位汇总与用法

说到css的单位,大家应该首先想到的是px,也就是像素,我们在网页布局中一般都是用px,但是近年来自适应网页布局越来越多,em和百分比也经常用到了.然后随着手机的流行,web app和hybrid app的开发,都用到了css3技术,在css3中,新增了许多单位,rem.vw和vh.vmin和vmax.ch和ex等等,那现在对这些单位分别做一下详细的介绍吧. 1.em 做前端的应该对em不陌生,不是什么罕见的单位,是相对单位,参考物是父元素的font-size,具有继承的特点.如果字体大小是16

对CSS尺寸单位&#39;em&#39;的长期误解

一直以来认为'em'是相对于父元素的字体大小. 直到今天学习移动WEB开发,重新复习css的尺寸大小时,惊奇发现:对em深深的误解了!!! 在CSS官网对em的解释实例是: a. h1{line-height:1.2em;} →使用的行高为h1自身的font-size*1.2;    b.h1{font-size:1.2em;}→h1的font-size为h1继承来的font-size*1.2;下面我们通过具体例子来验证一下.  <!DOCTYPE html> <html lang=&q

CSS的单位及line-height百分比

单位介绍 说到css的单位,大家应该首先想到的是px,也就是像素,我们在网页布局中一般都是用px,但是近年来自适应网页布局越来越多,em和百分比也经常用到了.然后随着手机的流行,web app和hybrid app的开发,都用到了css3技术,在css3中,新增了许多单位,rem.vw和vh.vmin和vmax.ch和ex等等,那现在对这些单位分别做一下详细的介绍吧. em 做前端的应该对em不陌生,不是什么罕见的单位,是相对单位,参考物是父元素的font-size,具有继承的特点.如果字体大小

Css3之基础-3 Css 尺寸单位、尺寸属性与边框属性

一.CSS 单位 尺寸单位 - %  : 百分比 - in : 英寸 - cm : 厘米 - mm : 毫米 - pt : 磅(1pt等于1/72英寸) - px : 像素(计算机屏幕上的一个点) - em : 1em等于当前的字体尺寸,2em等于当前字体尺寸的两倍 颜色单位 - rgb(x,x,x)   : RGB 值,如 rgb(255,0,0) - rgb(x%,x%,x%): RGB 百分比值,如 rgb(100%,0%,0%) - #rrggbb:十六进制数,如 #ff0000 - #

CSS的单位及css3的calc()及line-height百分比

锚点:css中百分比减去固定元素 单位介绍 说到css的单位,大家应该首先想到的是px,也就是像素,我们在网页布局中一般都是用px,但是近年来自适应网页布局越来越多,em和百分比也经常用到了.然后随着手机的流行,web app和hybrid app的开发,都用到了css3技术,在css3中,新增了许多单位,rem.vw和vh.vmin和vmax.ch和ex等等,那现在对这些单位分别做一下详细的介绍吧. em 做前端的应该对em不陌生,不是什么罕见的单位,是相对单位,参考物是父元素的font-si

关于对CSS尺寸单位&#39;em&#39;的长期误解

一直以来认为'em'是相对于父元素的字体大小. 直到今天学习移动WEB开发,重新复习css的尺寸大小时,惊奇发现:对em深深的误解了!!! 在CSS官网对em的解释实例是: a. h1{line-height:1.2em;} →使用的行高为h1自身的font-size*1.2;    b.h1{font-size:1.2em;}→h1的font-size为h1继承来的font-size*1.2;下面我们通过具体例子来验证一下.  <!DOCTYPE html> <html lang=&q