{"id":1625,"date":"2024-01-25T12:21:40","date_gmt":"2024-01-25T11:21:40","guid":{"rendered":"https:\/\/codeflarelimited.com\/blog\/?p=1625"},"modified":"2024-01-25T12:21:43","modified_gmt":"2024-01-25T11:21:43","slug":"css-trigonometric-functions","status":"publish","type":"post","link":"https:\/\/codeflarelimited.com\/blog\/css-trigonometric-functions\/","title":{"rendered":"CSS Trigonometric Functions"},"content":{"rendered":"\n

You already know of min()<\/strong>, max()<\/strong> and calc()<\/strong>. But did you know that as of December 2022,  Firefox and Safari began supporting CSS trigonometric functions. Later on other browsers would follow suit.<\/p>\n\n\n\n

But Why Another Mathematical Complexity?<\/h2>\n\n\n\n

From our research and personal tries, the main reason seems to be to create complex animations without needing so much JavaScript. But let us first find out what these trigonometric functions are. <\/p>\n\n\n\n

The basic CSS trigonometric functions are: \u00a0sin()<\/strong><\/code>,\u00a0cos()<\/strong><\/code>,\u00a0tan()<\/strong><\/code>,\u00a0asin()<\/code><\/strong>,\u00a0acos()<\/strong><\/code>,\u00a0atan()<\/strong><\/code>, and\u00a0atan2()<\/strong><\/code>. These functions are\u00a0defined in the CSS Values and Units Module Level 4<\/a>\u00a0and are now supported by all browsers.<\/p>\n\n\n\n

<\/p>\n\n\n\n

sin()<\/code>, cos()<\/code>, and tan()<\/code><\/h2>\n\n\n\n

The core three trig functions are:<\/p>\n\n\n\n

    \n
  • cos()<\/code>: Returns the cosine of an angle, which is a value between -1<\/code> and 1<\/code>.<\/li>\n\n\n\n
  • sin()<\/code>: Returns the sine of an angle, which is a value between -1<\/code> and 1<\/code>.<\/li>\n\n\n\n
  • tan()<\/code>: Returns the tangent of an angle, which is a value between \u2212\u221e<\/code> and +\u221e<\/code>.<\/li>\n<\/ul>\n\n\n\n

    Unlike their JavaScript counterparts, these functions accept both angles and radians as their argument. Let’s see some syntax:<\/p>\n\n\n\n

    cos()<\/h2>\n\n\n\n
    \/* Single <angle> values *\/\nwidth: calc(100px * cos(45deg));\nwidth: calc(100px * cos(0.125turn));\nwidth: calc(100px * cos(0.785398163rad));\n\n\/* Single <number> values *\/\nwidth: calc(100px * cos(63.673));\nwidth: calc(100px * cos(2 * 0.125));\n\n\/* Other values *\/\nwidth: calc(100px * cos(pi));\nwidth: calc(100px * cos(e \/ 2));\n<\/code><\/pre>\n\n\n\n
    sin()<\/h2>\n\n\n\n
    \/* Single <angle> values *\/\nwidth: calc(100px * sin(45deg));\nwidth: calc(100px * sin(0.25turn));\nwidth: calc(100px * sin(1.0471967rad));\n\n\/* Single <number> values *\/\nwidth: calc(100px * sin(63.673));\nwidth: calc(100px * sin(2 * 0.125));\n\n\/* Other values *\/\nwidth: calc(100px * sin(pi \/ 2));\nwidth: calc(100px * sin(e \/ 4));\n<\/code><\/pre>\n\n\n\n
    tan()<\/h2>\n\n\n\n
    \/* Single <angle> values *\/\nwidth: calc(100px * tan(45deg));\nwidth: calc(100px * tan(0.125turn));\nwidth: calc(100px * tan(0.785398163rad));\n\n\/* Single <number> values *\/\nwidth: calc(100px * tan(0.5773502));\nwidth: calc(100px * tan(1.732 - 1));\n\n\/* Other values *\/\nwidth: calc(100px * tan(pi \/ 3));\nwidth: calc(100px * tan(e));\n<\/code><\/pre>\n\n\n\n
    Real-life Use Cases<\/h2>\n\n\n\n
    There are several use cases for CSS trigonometric functions. In the following example, the dots revolve around a central point. Instead of rotating each dot around its own center and then moving it outwards, each dot is translated on the X and Y axes. The distances on the X and Y axes are determined by taking the\u00a0cos()<\/code>\u00a0and, respectively, the\u00a0sin()<\/code>\u00a0of the\u00a0--angle<\/code>\u00a0into account.<\/p>\n\n\n\n