CSS を使用して回転半径を動的に調整するにはどうすればよいですか?-CSSチュートリアル-php.cn

CSS を使用して回転半径を動的に調整するにはどうすればよいですか?

藏色散人

リリース： 2021-08-30 11:34:48

オリジナル

2024 人が閲覧しました

前回の記事『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