W3School TIY Editor
W3School 在线教程
改变方向
暗黑模式
运行代码
<!DOCTYPE html> <html> <head> <style> div.a { width: 120px; height: 120px; background-color: salmon; margin-bottom: 35px; } div.b { width: 120px; height: 120px; background-color: green; transform: rotate(25deg); } div.c { width: calc(120px * cos(25deg)); height: calc(120px * cos(25deg)); margin: calc(120px/4 * cos(25deg)); background-color: maroon; transform: rotate(25deg); transform-origin: center; translate: -10px 10px; } </style> </head> <body> <h1>cos() 函数</h1> <p>当一个元素通过 rotate() 旋转时，它会超出其初始大小（见第二个矩形）。</p> <p>为了解决这个问题，我们将使用 cos() 来调整元素的大小。</p> <p>在这里，cos() 在 calc() 函数中使用，用于确定第三个矩形元素的宽度、高度和边距。我们还需要调整 transform-origin 并添加 translate() 来校正位置。</p> <div class="a"></div> <div class="b"></div> <div class="c"></div> </body> </html>