Проблема преобразования, поворота и преобразования источника для текста в угловых стилях - PullRequest
Новая
       0

Проблема преобразования, поворота и преобразования источника для текста в угловых стилях

0 голосов
/ 12 января 2020

Я пытаюсь rotate и transform четыре пролета, основанные на изображении. Эффект, после успешного завершения, должен выглядеть следующим образом.

Сверху слева я могу получить нормально, используя комбинацию преобразования и поворота в сочетании с transform-origin. Другие оказываются более сложными. Я мог бы также использовать некоторые поля для смещения, когда и как, но поскольку квадрат в середине - это изображение с контролируемыми пропорциями, имеет смысл избегать полей, где это возможно.

В настоящее время мой вывод просто противоречив. Верхний и нижний не выстраиваются в линию, нижний левый находится внутри больше, чем верхний левый (из-за поворота минус, а не положительный). Можно ли сделать этот эффект с помощью преобразований?

https://jsfiddle.net/apfwszo4/

.c-profile{
  width:70%;
  margin:auto;
}
.c-profile-stats{
  position:relative;
}
.c-img {
  position: relative;
}
.c-img:before {
  content: " ";
  display: block;
  width: 100%;
  height: auto;
  padding-bottom: 150%;
}
.c-img .c-img-inner {
  width: 100%;
  height: 100%;
  object-fit: cover;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  position: absolute;
}

.c-profile-stats-dob, .c-profile-stats-awards, .c-profile-stats-total-prods, .c-profile-stats-most-notable {
  display: flex;
  align-items: center;
  position: absolute;
  white-space: nowrap;
  z-index: 2;
}
.c-profile-stats-standout:first-child, .c-profile-stats-standout:only-child {
  margin-left: 50px;
}
.c-profile-stats-dob {
  top: 0;
  left: 0;
  transform: rotate(90deg) translateY(100%);
  transform-origin: 0 0;
}
.c-profile-stats-dob-yr {
  transform: rotate(-90deg);
  display: inline-block;
}
.c-profile-stats-awards {
  top: 0;
  right: 0;
  transform: rotate(90deg) translateX(100%);
  transform-origin: bottom right;
}
.c-profile-stats-total-prods {
  bottom: 0;
  left: 0;
  transform: rotate(-90deg) translateY(100%);
  transform-origin: 0 0;
}
.c-profile-stats-most-notable {
  bottom: 0;
  right: 0;
  transform: rotate(-90deg) translateX(100%);
  transform-origin: top right;
}
 <div class="c-profile">
      <div class="c-profile-stats u-relative">
        <span class="c-profile-stats-dob">DOB 
            <span class="c-h2 c-profile-stats-standout"> 10/05 </span>
            <span class=" c-profile-stats-dob-yr c-profile-stats-standout c-h4">1755</span>
        </span>
        <span class="c-profile-stats-awards">Awards 
            <span class="c-h2 c-profile-stats-standout">22</span>
        </span>
        <span class="c-profile-stats-total-prods">Total productions
              <span class="c-h2 c-profile-stats-standout">18</span>
        </span>
        <span class="c-profile-stats-most-notable">Most notable 
              <span class="c-h2 c-profile-stats-standout"> BABC</span>
        </span>
        <figure class="c-img">
          <img class="c-img-inner" data-srcset="" data-src="" data-sizes="auto" />
        </figure>
      </div>
    </div>

desired effect

1 Ответ

0 голосов
/ 13 января 2020

Я не знаю, можно ли это решить с помощью преобразования

Но я сделал простое решение. использование left: -50px; на этом селекторе .c-profile-stats-total-prods дает хороший результат. 

.c-profile{
  width:70%;
  margin:auto;
}
.c-profile-stats{
  position:relative;
}
.c-img {
  position: relative;
}
.c-img:before {
  content: " ";
  display: block;
  width: 100%;
  height: auto;
  padding-bottom: 150%;
}
.c-img .c-img-inner {
  width: 100%;
  height: 100%;
  object-fit: cover;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  position: absolute;
}

.c-profile-stats-dob, .c-profile-stats-awards, .c-profile-stats-total-prods, .c-profile-stats-most-notable {
  display: flex;
  align-items: center;
  position: absolute;
  white-space: nowrap;
  z-index: 2;
}
.c-profile-stats-standout:first-child, .c-profile-stats-standout:only-child {
  margin-left: 50px;
}
.c-profile-stats-dob {
  top: 0;
  left: 0;
  transform: rotate(90deg) translateY(100%);
  transform-origin: 0 0;
}
.c-profile-stats-dob-yr {
  transform: rotate(-90deg);
  display: inline-block;
}
.c-profile-stats-awards {
  top: 0;
  right: 0;
  transform: rotate(90deg) translateX(100%);
  transform-origin: bottom right;
}
.c-profile-stats-total-prods {
  bottom: 0;
  left: -50px;
  transform: rotate(-90deg) translateY(100%);
  transform-origin: 0 0;
}
.c-profile-stats-most-notable {
  bottom: 0;
  right: 0;
  transform: rotate(-90deg) translateX(100%);
  transform-origin: top right;
}
 <div class="c-profile">
      <div class="c-profile-stats u-relative">
        <span class="c-profile-stats-dob">DOB 
            <span class="c-h2 c-profile-stats-standout"> 10/05 </span>
            <span class=" c-profile-stats-dob-yr c-profile-stats-standout c-h4">1755</span>
        </span>
        <span class="c-profile-stats-awards">Awards 
            <span class="c-h2 c-profile-stats-standout">22</span>
        </span>
        <span class="c-profile-stats-total-prods">Total productions
              <span class="c-h2 c-profile-stats-standout">18</span>
        </span>
        <span class="c-profile-stats-most-notable">Most notable 
              <span class="c-h2 c-profile-stats-standout"> BABC</span>
        </span>
        <figure class="c-img">
          <img class="c-img-inner" data-srcset="" data-src="" data-sizes="auto" />
        </figure>
      </div>
    </div>
...