Question

是否可以绝对定位倾斜元素，使其左下角与容器的边界保持接近（0px）？

＆＃13;

#one{
  position:absolute;
  background-color:darkkhaki;
  width:800px;
  height:200px;
  left:50%;
  transform: translateX(-50%)
}

#rect{
  position:absolute;
  background-color: salmon;
  width:400px;
  height:200px;
  left:50%;
  transform: translateX(-50%) skew(-25deg);
}

#marker{
  position:absolute;
  background-color:red;
  width:5px;
  height:200px;
  left: 200px;
}

＆＃13;

<div id="one">
  <div id="rect"></div>
  <div id="marker"></div>
  <div>

＆＃13;

在倾斜之前，我已经标记了矩形边的红线位置。我正在寻找一种方法来定位矩形，因此它的左下角接触红线并且不允许使用JS。我不能简单地使用左：Ypx＆＃39;，因为整个事情将是关键帧 - 动画（改变倾斜，外部元素上的rotateX +常量透视）。

否则，也许你可以建议另一种制作动画的方法：慢慢地起床的图片。从摆摊位置？

编辑： CODEPEN

Answer 1

您可以使用transform-origin Property。对于你的情况，我将<div id="marker">放在<div id="rect">内，并将transform-origin更改为0% 100%。

看看我的例子：

#one{
  position:absolute;
  background-color:darkkhaki;
  width:800px;
  height:200px;
  left:50%;
  transform: translateX(-50%)
}

#rect{
  position:absolute;
  background-color: salmon;
  width:400px;
  height:200px;
  left:50%;
  transform: translateX(-50%) skew(-25deg);
}

#marker{
  position:absolute;
  background-color:red;
  width:5px;
  height:200px;
  top: 0px;
  left: 0px;
  transform: skew(25deg);
  -webkit-transform-origin: 0% 100%;
  transform-origin: 0% 100%;
}

<div id="one">
  <div id="rect">
     <div id="marker"></div>
  </div>
<div>

这是Working Fiddle

CSS：绝对（？）定位偏斜元素（没有JS！重要）

1 个答案: