时间戳

首页 > 解决方案 > 具有响应式设计的旋转元素

html - 具有响应式设计的旋转元素

问题描述

我正在尝试创建一个 90 度旋转的布局。但问题是我以前使用的方法在这种情况下都不起作用。由于它是旋转的，改变大小，让它响应似乎不起作用。

我试图让“我的项目”标题占据旋转屏幕的一半，另一半将包含图​​像和容器。

谁能帮我解决这个问题？我如何确保它调整大小和放置始终是一半：在不同设备大小调整大小期间没有溢出的一半布局。请给我一个提示来完成我的工作。谢谢！

Link to the code in jsfiddle.

这是我正在做的想法的链接： https ://jsfiddle.net/7tfy4gdh/1/

这是我想要构建的：https ://prnt.sc/10wb1p7

标签： htmlcssresponsive-designcss-transforms

解决方案

考虑这一点的一种方法是将所有内容设计为好像没有旋转并且容器的宽度为 100vh 和高度为 100vw。然后当一切就位后，将容器旋转 90 度并平移它，使其完全适合视口。

为确保它是响应式的，请尽可能使用相对单位。所以宽度和高度为 %s。考虑填充，可能用 vmin 定义它，您可能还想相对定义字体大小，以便它在更大的屏幕上增长。

所以，首先实现这个：

在此处输入图像描述

这个片段启动了这个过程，定义了一个左侧 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>

推荐阅读