Xitrus está alojado en:
Otra más de las transformaciones que nos permite realizar CSS3 es el sesgado (o skew), que consiste en torcer la figura de forma oblicua, en el caso de un cuadrado lo podríamos transformar en un rombo.
Realmente con transform tenemos gran parte de las cosas que tendríamos en el antiguo flash, pero con CSS3, mucho más eficiente y más fácil de usar.
Las medidas para el sesgado se toman en grados (deg) y puede usarse con números positivos y negativos.
Existen tres funciones para este cometido: skew(x,y) que nos permite realizar el sesgado en el eje X y en eje Y, skewx(x) que nos permite establecer el eje X y por último skewy(y).
- /* Todas las medidas van en grados (deg) */
- transform: skew([eje X],[eje Y]);
- transform: skewx([eje X]);
- transform: skewy([eje Y]);
Al igual que cualquier otra transformación, se puede determinar el origen de la misma, aunque por defecto es en el centro puede que necesitemos cosas más específicas.
Voy a poner un ejemplo con varios bloques que tienen el mismo efecto de sesgado y se agruparán con distintos orígenes.
- /* Sesgamos 10 grados todos los bloques */
- div {
- transform: skewx(20deg);
- }
-
- /* Origen de la fila superior e inferior */
- .superior {
- transform-origin: 100% 0%;
- }
- .inferior {
- transform-origin: 100% 100%;
- }
Si quieres entender más a fondo como funciona el transform-origin puedes verlo en el artículo dedicado a ello.
Esta es una de las funciones más básicas que tiene transform, pero con imaginación se pueden realizar muchas cosas.
Xitrus está alojado en:
