关于css的数学计算----基础

最新推荐文章于 2023-02-06 14:01:25 发布

RexingLeung

最新推荐文章于 2023-02-06 14:01:25 发布

阅读量379

点赞数

分类专栏： css基础 html 文章标签： css3

本文链接：https://blog.csdn.net/RexingLeung/article/details/105009031

版权

css基础同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

html

8 篇文章 0 订阅

订阅专栏

现实中的问题

在css中 , 有时候对一个图片进行旋转的时候 , 如果图片是一个不规则的多边形 , 一旦旋转 , 就会将底层的div显示出来 , 不能保证图片所在的div填满 , 这时候就要对图片的旋转时放大缩小进行计算

以正方形为例的解决方法

如下面代码所示
html部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./assets/demo1.css">
</head>
<body>
    <div class="pc">
        <img src="./assets/正方形.jpg" alt="" style="width: 100%; height: 100%;">
    </div>
</body>
</html>

css部分

.pc{
    margin: 200px;
    width: 400px;
    height: 400px;
    background-color: orange;
    background-size: cover;
    overflow: hidden;
}
.pc>img{
    transform: rotate(45deg); /* 假设这里的图片需要旋转45度 , 那么我们如何保证旋转的同时放大能够刚好填满背后的div呢 */
}

问题效果图如下

数学计算解决问题

经过如下勾股定理计算

在旋转的同时需要同时放大 1.42 倍
所以 , 修改css代码如下


.pc{
    margin: 200px;
    width: 400px;
    height: 400px;
    background-color: orange;
    background-size: cover;
    overflow: hidden;
}
.pc>img{
    transform: rotate(45deg) scale(1.42);
}

得到我们的想要的效果图