颠倒（向后）对角粘性定位

Question

使用CSS和最小的Javascript（没有JQuery），最简单的方法是创建一个颠倒的对角线粘贴定位元素。颠倒的粘性定位元素基本上意味着当用户向下滚动页面时它将从列表滑动到水平粘性条。我想我已经弄明白了对角线：

element {
    transform: rotateX(45deg);
}

但我仍然对其余的一无所知。任何所有帮助/建设性的批评/建议都将不胜感激。

编辑＃1：

为了说明我的意思，我画了一张描述它的图片（我不是一个艺术家，对不起）。

根据我自己的测试，正如您在下面看到的那样，粘性定位似乎过于聪明，并且W3C无法通过自身的优势进行扩展。我的意思是position: sticky似乎意识到变换黑客（因为它切换到固定的位置），所以你不能只是翻转整个窗格，它被卡在上面以创建一个颠倒的效果当你向下滚动时，它会上升。唉，如果position: absolute的当前position: fixed行为只有position: sticky版本但是，我可能错了（我希望我是）。

＆＃13;

＆＃13;

body {
  width: 90%;
  max-width: 900px;
  margin: 0 auto;
  font-family: Source Serif Pro, serif;
  line-height: 1.5;
  font-size: 1.3rem;
}
outer {
	position: relative;
  transform: rotateX(180deg);
  transform-origin: 0 100%;
  transform-style: preseve-3d;
}
.sticky {
  height: 100%;
  width: 50%;
  padding: 2.2rem;
  float: right;
  position: -webkit-sticky;
  position: sticky;
  top: 0px;
  transform: rotateZ(180deg);
}
#sticky img {
  width: 100%;
  display: block;
  margin-bottom: 1rem;
}

＆＃13;

<p>Rank grass, waist high, grows upon the plain of Phutra&mdash;the gorgeous flowering grass of the inner world, each particular blade of which is tipped with a tiny, five-pointed blossom&mdash;brilliant little stars of varying colors that twinkle in the green foliage to add still another charm to the weird, yet lovely, landscape.</p>
<outer>
<div class="sticky">
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/core.jpg" alt="Visualisation of the Earth's core, showing the planet cut in half with the core bulging from the center">
  <p>The Earth's inner core is a solid ball of iron–nickel alloy with a radius of approximately 1220 kilometers, or about 70% that of the Moon. It is thought to have approximately the same temperature as the surface of the Sun: around 5400°C.
</div>
</outer>
<p>But then the only aspect which attracted me was the distant hills in which I hoped to find sanctuary, and so I hastened on, trampling the myriad beauties beneath my hurrying feet.  Perry says that the force of gravity is less upon the surface of the inner world than upon that of the outer.  He explained it all to me once, but I was never particularly brilliant in such matters and so most of it has escaped me.  As I recall it the difference is due in some part to the counter-attraction of that portion of the earth's crust directly opposite the spot upon the face of Pellucidar at which one's calculations are being made.  Be that as it may, it always seemed to me that I moved with greater speed and agility within Pellucidar than upon the outer surface&mdash;there was a certain airy lightness of step that was most pleasing, and a feeling of bodily detachment which I can only compare with that occasionally experienced in dreams.</p>

<p>And as I crossed Phutra's flower-bespangled plain that time I seemed almost to fly, though how much of the sensation was due to Perry's suggestion and how much to actuality I am sure I do not know.  The more I thought of Perry the less pleasure I took in my new-found freedom. There could be no liberty for me within Pellucidar unless the old man shared it with me, and only the hope that I might find some way to encompass his release kept me from turning back to Phutra.</p>

<p>Just how I was to help Perry I could scarce imagine, but I hoped that some fortuitous circumstance might solve the problem for me.  It was quite evident however that little less than a miracle could aid me, for what could I accomplish in this strange world, naked and unarmed?  It was even doubtful that I could retrace my steps to Phutra should I once pass beyond view of the plain, and even were that possible, what aid could I bring to Perry no matter how far I wandered?</p>

<p>The case looked more and more hopeless the longer I viewed it, yet with a stubborn persistency I forged ahead toward the foothills.  Behind me no sign of pursuit developed, before me I saw no living thing.  It was as though I moved through a dead and forgotten world.Eget duis at tellus at urna. Purus sit amet volutpat consequat mauris. Ultrices in iaculis nunc sed augue. Duis convallis convallis tellus id interdum. A pellentesque sit amet porttitor eget. Sed felis eget velit aliquet sagittis id consectetur purus ut. Dictumst quisque sagittis purus sit amet volutpat. Sit amet nisl suscipit adipiscing bibendum est ultricies. Vitae elementum curabitur vitae nunc sed velit dignissim sodales. Amet porttitor eget dolor morbi. Facilisis volutpat est velit egestas dui. Sit amet aliquam id diam maecenas ultricies mi. Phasellus faucibus scelerisque eleifend donec pretium vulputate sapien nec. Accumsan in nisl nisi scelerisque eu ultrices vitae auctor. Egestas fringilla phasellus faucibus scelerisque eleifend donec. Sagittis purus sit amet volutpat consequat. Viverra tellus in hac habitasse platea dictumst vestibulum rhoncus. Est pellentesque elit ullamcorper dignissim. A cras semper auctor neque vitae tempus quam. Tortor posuere ac ut consequat semper viverra nam libero. Nullam eget felis eget nunc lobortis mattis. Purus gravida quis blandit turpis cursus in hac habitasse. Enim praesent elementum facilisis leo vel fringilla est. Mattis aliquam faucibus purus in massa tempor nec. Sit amet nulla facilisi morbi tempus iaculis urna. Quam lacus suspendisse faucibus interdum posuere lorem ipsum dolor. Tempus urna et pharetra pharetra massa. Velit euismod in pellentesque massa placerat. Sed tempus urna et pharetra pharetra massa massa ultricies. Eget dolor morbi non arcu risus quis varius. Id velit ut tortor pretium viverra suspendisse potenti nullam. Varius vel pharetra vel turpis nunc eget lorem. In hac habitasse platea dictumst quisque sagittis purus sit. Egestas purus viverra accumsan in nisl nisi scelerisque. Quis blandit turpis cursus in hac habitasse. In cursus turpis massa tincidunt dui ut ornare lectus. Iaculis nunc sed augue lacus viverra vitae congue eu consequat. Mauris cursus mattis molestie a iaculis at erat. Tempus quam pellentesque nec nam aliquam sem et. Morbi tincidunt augue interdum velit euismod in pellentesque massa. Sit amet venenatis urna cursus eget. Mattis pellentesque id nibh tortor id. Quis viverra nibh cras pulvinar mattis nunc. Pellentesque massa placerat duis ultricies lacus sed turpis tincidunt. Laoreet id donec ultrices tincidunt arcu non sodales neque.</p>

＆＃13;

＆＃13;

＆＃13;