CSS의 각도 단위는 무엇입니까?
- 青灯夜游원래의
- 2020-11-20 16:26:0511358검색
CSS의 각도 단위는 다음과 같습니다. 1. deg, 도(Degress), 총 360도의 원 2. grad, 그래디언트(Gradians), 총 400개의 그래디언트가 있는 원 3. rad, 라디안 (라디안), 원 총 2π 라디안; 4. 회전, 원은 총 1회전합니다.
CSS의 각도 단위
1, deg
degree(Degress). 원은 총 360도입니다
90deg = 100grad = 0.25turn ≒ 1.570796326794897rad
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
.test{
height:100px;background:#eee;
-moz-transform:rotate(2deg);
-webkit-transform:rotate(2deg);
-o-transform:rotate(2deg);
-ms-transform:rotate(2deg);
transform:rotate(2deg);
}
</style>
</head>
<body>
<div>transform:rotate(2deg);</div>
</body>
</html>2, grad
Gradians(그라디안). 원에는 총 400개의 기울기
90deg = 100grad = 0.25turn ≒ 1.570796326794897rad
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
.test{
height:100px;background:#eee;
-moz-transform:rotate(2grad);
-webkit-transform:rotate(2grad);
-o-transform:rotate(2grad);
-ms-transform:rotate(2grad);
transform:rotate(2grad);
}
</style>
</head>
<body>
<div>transform:rotate(2grad);</div>
</body>
</html>3, rad
라디안(라디안)이 있습니다. 원은 총 2π 라디안
90deg = 100grad = 0.25turn ≒ 1.570796326794897rad
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
.test{
height:100px;background:#eee;
-moz-transform:rotate(2rad);
-webkit-transform:rotate(2rad);
-o-transform:rotate(2rad);
-ms-transform:rotate(2rad);
transform:rotate(2rad);
}
</style>
</head>
<body>
<div>transform:rotate(2rad);</div>
</body>
</html>4,turn
회전합니다. 원은 총 1회전입니다
90deg = 100grad = 0.25turn ≒ 1.570796326794897rad
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
.test{
height:100px;background:#eee;
-webkit-transform:rotate(.5turn);
-o-transform:rotate(.5turn);
-ms-transform:rotate(.5turn);
transform:rotate(.5turn);
}
</style>
</head>
<body>
<div>transform:rotate(.5turn);</div>
</body>
</html더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 교육을 방문하세요! !
위 내용은 CSS의 각도 단위는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.