Question

当我将旋转应用到整个页面时，我在网页底部生成了一个不可见空间，并且对于某些应用负旋转（ - #ded）的元素反转，我遇到了一些麻烦。我使用overflow: hidden与padding-bottom相结合只删除了所需的空格，但在悬停效果中使用属性transform时，这似乎会产生错误。以下是该错误的截图。

在错误之前： http://prntscr.com/fjiuf4

错误： http://prntscr.com/fjiuqb

针对这两个问题之一的任何解决方案？删除空间或避免错误的另一种方法。

以下是我的页面的结构示例，您可以在其中看到也生成了空格。

<!DOCTYPE HTML>

<html>

<head>
	<meta charset="UTF-8" />
	<title>Your Website</title>
</head>
    
<style>

    #full{
        transform: rotate(-2deg);
        background-color: aqua;
        height: 1000px;
    }
    #content{
        transform: rotate(2deg);
        margin-left: 30px;
    }
    #main{
        background-color: red;
        width: 80%;
    }
    footer{
        background-color: yellow;
        width: 80%;
        position: absolute;
        top: 1000px;
    }
</style>

<body>
    <div id="full">
        <div id="content">
        <div id="main">
            <p>welkome</p>
        </div>

	<footer>
		<p>Copyright 2009 Your name</p>
	</footer>
    
        </div>
    </div>

</body>

</html>

如何删除transform：rotate生成的不可见空间？

0 个答案: