Home >Web Front-end >Front-end Q&A >What is the unit of deg in css3?
What is the unit of deg in css3?
- 青灯夜游Original
- 2022-02-28 17:12:4510635browse
In CSS3, deg is an angle unit, the full name is "Degress", which means "degree"; the angle range is from "0~360" degrees (deg), it can also be a negative number, if it is a negative number, it is inverse hour hand.
The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.
In CSS3, deg is an angle unit, the full name is "Degress", which means "degree".
A circle has a total of 360 degrees, so the angle range is from "0~360" degrees (deg). Of course, it can also be a negative number. If it is a negative number, it will be counterclockwise.
Conversion between angle values:
90deg = 100grad = 0.25turn ≈ 1.570796326794897rad
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css 边框阴影--filter:drop-shadow()</title>
<style>
div {
margin: 30px;
width: 200px;
height: 100px;
background-color: yellow;
line-height: 100px;
text-align: center;
}
</style>
</head>
<body>
<div>
<p>Hello World</p>
</div>
</body>
</html>
Adding the following style to the div will cause the element to rotate 90 degrees clockwise
/* Rotate div */ transform: rotate(90deg); -ms-transform: rotate(90deg); /* Internet Explorer */ -moz-transform: rotate(90deg); /* Firefox */ -webkit-transform: rotate(90deg); /* Safari 和 Chrome */ -o-transform: rotate(90deg); /* Opera */
Adding the following style to the div will cause the element to rotate counterclockwise Rotate 90 degrees
/* Rotate div */ transform: rotate(-90deg); -ms-transform: rotate(-90deg); /* Internet Explorer */ -moz-transform: rotate(-90deg); /* Firefox */ -webkit-transform: rotate(-90deg); /* Safari 和 Chrome */ -o-transform: rotate(-90deg); /* Opera */
(Learning video sharing: css video tutorial, web front-end entry tutorial)
The above is the detailed content of What is the unit of deg in css3?. For more information, please follow other related articles on the PHP Chinese website!