Home > Article > Web Front-end > How to dynamically adjust the rotation radius using CSS?

How to dynamically adjust the rotation radius using CSS?

藏色散人Original: 2021-08-30 11:34:481983browse

In the previous article "Teach you how to draw a circle with a gradient border using CSS! 》Introduces you how to use CSS to draw a circle with a gradient border. Friends who are interested can learn more~

The focus of this article is to teach you how to use CSS to adjust rotation. radius.

In CSS, we can use CSS custom properties (variables) to adjust the size of the rotation radius. Now the latest browsers of Mozilla, Google, Opera, Apple and Microsoft have custom attributes, so let’s try it~

Let’s go directly to the complete code:

<!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>

The effect is as follows:

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

In the above code:

First, define a global custom attribute named "-radius".

Then use the calc() function to calculate the "-radius" value, which is 45deg; we can also use any other defined variables to calculate the radius as needed, which can be used to adjust the size of the radius of rotation.

Finally, use the var() function to insert the value of the custom attribute to rotate the object.

Note:

calc() function is used to dynamically calculate the length value.

It should be noted that a space needs to be reserved before and after the operator, for example: width: calc(100% - 10px);
Any length value can be calculated using the calc() function;
The calc() function supports " ", "-", "*", "/" operations;
The calc() function uses standard mathematical operation priority rules;

var() function is used to insert custom attributes Value, this method is useful if an attribute value is used in multiple places. (Supported version: CSS3)

PHP Chinese website platform has a lot of video teaching resources. Welcome everyone to learn "css Video Tutorial"!

The above is the detailed content of How to dynamically adjust the rotation radius using CSS?. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Super practical! Use CSS3 to overlay two images and display them togetherNext article：Super practical! Use CSS3 to overlay two images and display them together

See more

How to dynamically adjust the rotation radius using CSS?

Related articles