我正在尝试创建一个 90 度旋转的布局。但问题是我以前使用的方法在这种情况下都不起作用。由于它是旋转的，改变大小，让它响应似乎不起作用。
我试图让“我的项目”标题占据旋转屏幕的一半，而另一半将包含 图像和容器。
谁能帮我解决这个问题？我如何确保它调整大小和放置始终是一半：在不同设备大小调整大小期间没有溢出的一半布局。请给我一个提示来完成我的工作。谢谢！
Link to the code in jsfiddle.
这是我正在做的想法的链接： https://jsfiddle.net/7tfy4gdh/1/
这是我想要构建的：https://prnt.sc/10wb1p7
【问题讨论】：
标签： html css responsive-design css-transforms
考虑这一点的一种方法是将所有内容设计为好像没有旋转，并且容器的宽度为 100vh，高度为 100vw。然后当一切就位后，将容器旋转 90 度并平移它，使其完全适合视口。
为确保一切都是响应式的，请尽可能使用相对单位。所以宽度和高度为 %s。考虑填充，可能用 vmin 定义它，您可能还想相对定义字体大小，以便它在更大的屏幕上增长。
所以，首先实现这个：
这个 sn-p 启动该过程，定义一个左侧 div 和一个右侧 div，将每个 div 的主要组件居中并旋转和平移容器。这不是全部工作，徽标方面需要更多工作 - 您可能会发现在 %s 等中定义所有内容，最好不要使用 flex，而是自己控制整个空间的使用。
请记住，旋转的东西并不意味着它的高度变成垂直边......
下面是一些开始的代码：
<head>
<style>
* {
box-sizing: border-box;
margin:0;
padding: 0;
overflow: visible;
}
body {
width: 100vw;
height: 100vh;
overflow: visible;
}
.container {
text-align: center;
width: 100vh;
height: 100vw;
transform: rotate(90deg) translateY(-100%);
transform-origin: 0% 0%;
overflow: hidden;
}
.container .left-side {
position: relative;
width: 50vh;
height: 100vw;
float: left;
}
.container .left-side .project-title {
position: relative;
top: 50%;
transform: translateY(-50%);
}
.container .project-title span {
text-align: center;
}
.container .right-side {
position: relative;
top: 0;
width: 50vh;
height: 100vw;
float: left;
padding: 1vmin;
}
.container .right-side .control {
position: relative;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
rmax-width: 450px;
rmin-width: 350px;
height: 80%;
width: 80%;
background-color: red;
padding: 5%;
}
.control .logo {
height: 25%;
}
.control .logo img {
width:100px;
height: 100%;
width: auto;
}
.logo-container {
flex:1;
display:flex;
margin-top: 5%;
height: 30%;
}
.logo-maker{
flex:1;
padding:25px 10px;
background-color: #ccc;
color:#ffffff;
border-radius: 8px;
padding-top: 15px;
}
.logo-maker .maker-contain {
width:50px;
background-color: #ccc;
border-radius: 8px;
padding:5px;
padding-bottom: 0;
margin:auto;
}
.logo-maker .maker-contain img{
width:100%;
}
.logo-maker h3 {
margin-top: 15px;
}
.earn-coin {
flex:1;
text-align: center;
padding:25px 0;
padding-top: 15px;
margin-left: 5px;
border-radius: 8px;
background-color: #ccc;
box-shadow: 5px 4px 5px -5px rgba(0,0,0,0.76);
-webkit-box-shadow: 5px 4px 5px -5px rgba(0,0,0,0.76);
-moz-box-shadow: 5px 4px 5px -5px rgba(0,0,0,0.76);
}
.earn-coin img {
width:40px;
margin:auto;
}
.earn-coin h3{
margin-top: 15px;
}
.footer {
padding:20px 30px;
padding-left: 55px;
background-color: #ccc;
background-color: purple;
height: 25%;
color:#ffffff;
border-radius: 5px;
margin-top: 5%;
text-align: left;
}
.footer i{
font-size:35px;
}
.footer h3 {
display: inline;
margin-left: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="left-side">
<div class="project-title">
<h2>
My Project
</h2>
</div>
</div>
<div class="right-side">
<div class="control">
<div class="logo">
<img src="https://d1csarkz8obe9u.cloudfront.net/posterpreviews/lion-fire-logo-design-template-free-89daa14626ac403bd3cf6282036663ff_screen.jpg?ts=1572094154">
</div>
<section class="logo-container">
<div class="logo-maker">
<div class="maker-contain">
<img src="https://www.logaster.com/blog/wp-content/uploads/2018/05/LogoMakr.png" alt="">
</div>
<h3>Build Logo</h3>
</div>
<div class="earn-coin">
<div class="coin-img">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSEWIhIZ48jnuWwHjIZ9I_EpQbRsHrFtomThQ&usqp=CAU">
</div>
<h3>Earn Coins</h3>
</div>
</section>
<div class="footer">
<i class="fa fa-bell"></i>
<h3>
Build by Dave ___
</h3>
</div>
</div>
</div>
</div>
</body>
【讨论】：