CSS를 사용하여 회전 반경을 동적으로 조정하는 방법은 무엇입니까?-CSS 튜토리얼-php.cn

CSS를 사용하여 회전 반경을 동적으로 조정하는 방법은 무엇입니까?

藏色散人

풀어 주다： 2021-08-30 11:34:48

원래의

1976명이 탐색했습니다.

이전 글에서 "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>

로그인 후 복사

효과는 다음과 같습니다.

GIF 2021-8-30 星期一上午 11-27-50.gif