角样式文本的变换、旋转和变换原点问题

Question

我正在尝试 rotate 和 transform 四个基于图像的跨度。成功完成后的效果应如下所示。

左上角我可以搞定，结合变换和旋转，结合transform-origin。其他人被证明更具挑战性。我也可以使用一些边距来抵消，但由于中间的正方形是比例受控的图像，因此尽可能避免边距是有意义的。

目前，我的输出只是不一致。顶部和底部不对齐，左下角比左上角更靠内（由于负旋转而不是正旋转）。这种效果可以用变换来完成吗？

.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>

Answer 1

不知道能不能用transform解决

但是我做了一个简单的解决方案。在这个选择器 .c-profile-stats-total-prods 上使用 left: -50px; 得到很好的结果。

.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>

角样式文本的变换、旋转和变换原点问题

Transform, rotate and transform-origin issue for corner style text

css

transform