Rotating the screen through custom css (saving performance)
Hello guys,
if you’re running on low end hardware e.g. Raspberry Pi and want to rotate the screen you can rotate it with a custom css file, thus saving precious performance!
Copy paste this code to your custom.css file for a screen rotation of 90degrees:
body {
margin: 0;
position: absolute;
transform: rotate(90deg);
transform-origin: bottom left;
width: 100vh;
height: 100vw;
object-fit: cover;
top: -100vw;
visibility: visible;
}
Copy paste this code to your custom.css file for a screen rotation of -90degrees:
body {
margin: 0;
position: absolute;
transform: rotate(-90deg);
transform-origin: top left;
width: 100vh;
height: 100vw;
object-fit: cover;
top: 100vh;
visibility: visible;
}
Also note that you may have to switch back framebuffer_width and framebuffer_height in your /boot/config.txt file as stated by evroom here, e.g.:
framebuffer_width=1600
framebuffer_height=900
Drawbacks:
- since it only rotates the magic mirror app, external apps like omxplayer have to be rotated seperately
- you may have to edit the css file of some modules as well
This could be added to the wiki here.