Tengo una duda, y es que para un trabajo de clase estoy intentando crear como "un bola de navidad" que gire, la cosa es que la bola ya la tengo hecha y girando, pero hay un problema y es que si el tamaño se lo doy con em o con px al hacer mas grande o mas pequeña la pantalla sigue siendo del mismo tamaño la bola, pero si le doy el tamaño con porcentajes al ser el ancho mas grande que el alto no hay manera de hacer que cuadre bien y se va estirando o achatando segun vas moviendo la pagina. Os dejo a continuacion lo que llevo para que veais a lo que me refiero, dadle a ver en pagina completa y redimensionar la ventana. Alguien podria ayudarme para que se ajuste el tamaño al tamaño de la ventana y que no se me deforme? Gracias!!
:root, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
box-sizing: border-box;
}
div.bolaNavidad {
left: 10%;
top: 10%;
height: 10%;
width: 5%;
background-image: url(https://preview.ibb.co/n3pJdV/bolamod.png);
background-size: cover;
background-repeat: repeat;
border-radius: 50%;
position: absolute;
box-shadow: -.75em -.25em 0 0 rgba(0,0,0,.1) inset,
.2em .1em 0 0 rgba(255,255,255,.2) inset;
animation: bolas 40s infinite linear;
}
@keyframes bolas {
from {
background-position: left center;
}
to {
background-position: -800px center;
}
}
<!DOCTYPE html>
<html lang="es">
<head>
<title>Navidad</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/home.css">
</head>
<body>
<div class="bolaNavidad"></div>
</body>
</hmtl>