이전 글에서 "CSS를 사용하여 그라데이션 테두리가 있는 원을 그리는 방법을 가르쳐주세요! 》CSS를 사용하여 그라데이션 테두리가 있는 원을 그리는 방법을 소개합니다. 관심 있는 친구들이 배울 수 있습니다~
이 글의 초점은 CSS를 사용하여 회전 반경을 조정하는 방법을 가르치는 것입니다.
CSS에서는 CSS 사용자 정의 속성(변수)을 사용하여 회전 반경의 크기를 조정할 수 있습니다. 이제 Mozilla, Google, Opera, Apple 및 Microsoft의 최신 브라우저에는 사용자 정의 속성이 있으므로 사용해 보겠습니다~
전체 코드로 직접 이동해 보겠습니다.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#box {
background-color: orange;
width: 200px;
height: 200px;
margin: 10px;
transition: transform 1s linear;
transform-origin: bottom left;
}
:root {
--radius: calc(10 * 4.5deg);
}
.box-rotate {
transform: rotate(var(--radius));
}
</style>
</head>
<body>
<h1 style="color: red;">
PHP中文网
</h1>
<button onclick="rotate()">点击我</button>
<div id="box"></div>
<script>
function rotate() {
var element = document.getElementById("box");
element.classList.toggle("box-rotate");
}
</script>
</body>
</html>효과는 다음과 같습니다.
위 코드에서
먼저 "-radius"라는 전역 사용자 정의 속성을 정의합니다.
그런 다음 calc() 함수를 사용하여 45도인 "-radius" 값을 계산합니다. 필요한 경우 다른 정의된 변수를 사용하여 회전 반경의 크기를 조정하는 데 사용할 수 있습니다. .
마지막으로 var() 함수를 사용하여 사용자 정의 속성 값을 삽입하여 객체를 회전합니다.
참고:
calc() 함수는 길이 값을 동적으로 계산하는 데 사용됩니다. calc() 函数用于动态计算长度值。
需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；
任何长度值都可以使用calc()函数进行计算；
calc()函数支持 "+", "-", "*", "/" 运算；
calc()函数使用标准的数学运算优先级规则；
var()
var() 함수는 사용자 정의를 삽입하는 데 사용됩니다. 속성 값 - 속성 값이 여러 위치에서 사용되는 경우 이 방법이 유용합니다. (지원 버전: CSS3) 🎜🎜PHP 중국어 웹사이트 플랫폼에는 "🎜css 비디오 튜토리얼🎜"을 배우는 것을 환영합니다! 🎜위 내용은 CSS를 사용하여 회전 반경을 동적으로 조정하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!