Rotate / Origin to top left

HTML & CSS
1

http ://to r onto.f in als ite.co m/

I’m trying to get the blue date to the top left of the news posts. I can get the text lined up to the bottom left but I need it aligned to the top left. I’m having to arrive at magic numbers to get this working…can someone help?

2

Here you go.

setInterval(function(){$('.fsDateTime').css({top:Math.floor(Math.random()*$(window).height())+'px',right:Math.floor(Math.random()*$(window).width())+'px'})}, 100);

It’ll end up where you want it… eventually… probably.

3 Likes
3

I have a nagging suspicion that it won’t pass code review :wink: .

1 Like
4

Here is a bit of a mock-up. It does not really resemble your code on the site, but the theory is there.
I think…

1 Like
5

Managed to find this which @PaulOB did a little while back, not sure if it helps.

6

Something like this should do the trick (which replaces your original code).

.home .our-stories-container .fsNews .fsListItems article .fsDateTime{
position:absolute;
top: 0;
left:0;
bottom:0;
text-align: right;
transform: rotate(-90deg);
width:80%;
padding: 0 10px;
height:100%;
line-height: 40px;
color: rgba(255, 255, 255, 0.7);
z-index:10;
}

It can be awkward lining things up when rotated.:slight_smile:

7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.