代码之家 › 专栏 › 技术社区 › Qwerty

CSS转换:将子级的左上角旋转到父级的左下角

css-transforms css3 css html

Qwerty · 技术社区 · 6 年前

有没有一种方法可以在不知道行高/父级高度的情况下自动实现这一点,方法是负数 translate ?

理想解决方案:

transform:translate(-100%of parent height or 1 line height here pls)


    
     
      
       transform origin:top-left over bottom-left


   
    
     所需:
     
      
      .
     
     
      实际结果:
     
     
      
     
    
    
     
      jsfiddle此处
     
    
    
    
    
     
      .parent{
上边距:100px;
边框:1倍纯绿色;
边框左颜色:红色;
位置:绝对;
}

.儿童{
边框:1倍纯色橙色;
边框左颜色:红色;
变换:旋转(-90度)/*变换(-20像素)*/;
变换原点:左上角;
}<代码> < /PRE>
<DIV class=“child”>
概念
</DIV>
</DIV>>=
     
     < / div解决方案:
     
     
     
      
       
        transform: translate(-100% of parent height or 1 line height here pls)
       
      
      
       
        transform-origin: top left over bottom left
       
      
     
     
      渴望的:
      
       
      
      实际结果:
      
       
      
     
     
     
     
      
       jsfiddle here
      
     
     
     
     
      
       .parent {
  margin-top: 100px;
  border: 1px solid green;
  border-left-color: red;
  position: absolute;
}

.child {
  border: 1px solid orange;
  border-left-color: red;
  transform: rotate(-90deg)/*translate(-20px)*/;
  transform-origin: top left;
}
       <div class="parent">
  <div class="child">
    CONCEPT
  </div>
</div>

2 回复 | 直到 6 年前

Temani Afif 6 年前

您可以尝试以下操作:

.parent {
  border: 1px solid green;
  border-left-color: red;
  margin-top:100px;
  position:absolute;
}

.child {
  border: 1px solid orange;
  border-left-color: red;
  transform: rotate(-90deg) translateY(100%);
  transform-origin: bottom left;
}

<div class="parent">
  <div class="child">
    CONCEPT
  </div>
</div>

Qwerty 6 年前

好吧,看来我的魔法就在孩子的绝对位置上。这样,父级缩小到零高度,其中左上角等于左下角。

.child{
位置:绝对;
}
但是,对于那些不会因其他内容而收缩的家长来说,此解决方案不起作用。

左下角。



.child {
  position: absolute;
}


但是,对于那些不会因其他内容而收缩的家长来说,此解决方案不起作用。

推荐文章

YunusoviÄ · 我无法用css更改html段落颜色

1 年前

Blake · 无法使用CSS旋转Angular 15中的字体图标

1 年前

Maarten -Monica for president · 将图像放在锚点标记内时调整网格中的图像大小

1 年前

Phil Lucks · 如何制作边界的外半径?

1 年前

roy_meir · 创建自定义下拉式元素

1 年前

Community wiki · 如何为触摸设备优化网站

1 年前

Paras Chandravanshi · 为什么<ul>没有从其父<p>元素继承?

1 年前

tpetzoldt · 如何在有光泽的情况下抑制图像的抗锯齿?

1 年前

boyenec · 反应如何将css样式应用于我从api respose获得的页面的spcifc部分

1 年前

manofconstsorrow · 点击导航项目关闭汉堡菜单

1 年前