MMM-SelfieShot: Rotating camera

[MMRIZE]

@hclaus
So what you need is just displaying picture on mm screen with 90 CW/CCW rotation, I think it could be done with CSS only. I’ll test and show you how to do in a while. (I have dinner now ;) )

[MMRIZE]

@hclaus
custom.css

#SELFIE .result {
  width: auto;
  height: auto;
  aspect-ratio: 1 / 1;
}

@media (min-aspect-ratio: 1 / 1) { /* Horizontal Screen */
  #SELFIE .result {
    left: calc((100vw - 90vh) / 2);
    transform: rotate(90deg);
    width: 90vh;
    top: 0;
  }
}
@media (max-aspect-ratio: 1 / 1) { /* Vertical Screen */
  #SELFIE .result {
    top: calc((100vh - 90vw) / 2);
    transform: rotate(90deg);
    height: 90vw;
    left: 0;
  }
}

You can adjust some values for your purpose.

[sdetweil]

@MMRIZE said in MMM-SelfieShot: Rotating camera:

top: calc((100vh - 90vw) / 2);

height -width?

[MMRIZE]

@sdetweil
Yes, It works. Guess it. :)

[sdetweil]

@MMRIZE hm… on my 2560wx1080h, top is -612

on my 3840wx2160h, top is -648
((12160) -(.93840))/2

[MMRIZE]

@sdetweil
It would be rotated.

2560w x 1080h
that is horizontal resolution, so by media rule; below will be adopted;

left: calc((100vw - 90vh) / 2); /* (2560 - 972) / 2 = 794 */
transform: rotate(90deg);
width: 90vh; /* 972 */
height: (auto) /* 972, by aspect-ratio: 1 / 1; */
top: 0;

[sdetweil]

@MMRIZE ok, got it…

[MMRIZE]

@hclaus
Anyway, this is a universal solution, because I don’t know your screen resolution, direction, background padding/margin, wanted photo size, etc.
With specific conditions, it would be deadly simpler.