关于css的数学计算----基础
现实中的问题
在css中 , 有时候对一个图片进行旋转的时候 , 如果图片是一个不规则的多边形 , 一旦旋转 , 就会将底层的div显示出来 , 不能保证图片所在的div填满 , 这时候就要对图片的旋转时放大缩小进行计算
以正方形为例的解决方法
如下面代码所示
html部分
Document
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);
}
得到我们的想要的效果图
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！