transform: función(parametros);
En este caso la función que emplearemos sera “scale” en el cual podremos aumentar o disminuir nuestros elementos:
Diferentes funciones se pueden utilizar,
scaleX(x) y scaleY(y):
son lo mismo pero sólo afectan al ancho (X) o el alto (Y), es decir, que si queremos que solo aumente o disminuya de tamaño en uno de sus orígenes, debemos declarar solo un valor. En la siguiente declaración podemos manejar los dos valores juntos,
EJEMPLO transform: scale(2);
Diferentes funciones se pueden utilizar,
scaleX(x) y scaleY(y):
son lo mismo pero sólo afectan al ancho (X) o el alto (Y), es decir, que si queremos que solo aumente o disminuya de tamaño en uno de sus orígenes, debemos declarar solo un valor. En la siguiente declaración podemos manejar los dos valores juntos,
scale(x,y):
donde el valor de nuestro parámetro normal es 1; por ejemplo cuando el valor es 1.5 aumenta un 50% o si el valor es 0.5 el elemento disminuiría un 50%. Si se le aplica un valor solamente el aumento sera proporciona en ambos lados, si se aplica los dos valores, aumentara como queramos, ya sea mas grande de altura o de ancho. Empezamos a insertar nuestro codigo para entender este tipo de stilos que nos proporciona la versión 3 de css,
<div id="scale">
EJEMPLO
</div>
insertamos en nuestra hoja de estilos:
<style>
#scale{
margin:150px;
box-shadow:inset 2px 5px 25px #333333;
-moz-box-shadow:inset 2px 5px 25px #FFF;
webkit-box-shadow:inset 2px 5px 25px #FFF;
width:100px;
height:100px;
background:#06F;
}
#scale:hover{
-moz-transform: scale(2,2.5) ;
-webkit-transform: scale(2,2.5) ;
-o-transform: scale(2,2.5) ;
-ms-transform: scale(2,2.5) ;
transform: scale (2,2.5);
}
</style>
El efecto nos quedara de la siguiente forma:
EJEMPLO
transform: scale (2,2.5);
Como observamos manejamos nuestro dos valores de coordenadas, si solo utilizamos un valor el incremento sera proporcional como aparece en el comienzo de este tema. Podemos disminuir nuestra divición de contenido como se muestra a continuación
EJEMPLO
transform: scale (0.8,0.5);
Al utilizar un valor de coordenadas especifico (de un solo valor) nos quedaría de la siguiente manera, donde vemos que es igual el aumento de tamaño en el ancho del elemento div.
EJEMPLO
transform: scaleX(2);
Podemos jugar con todos los valores posibles de scale y hacer diferentes diseños gráficos. En el siguiente ejemplo hacemos un menu que nos permita visualizar un poco de lo que ya hemos escrito en tutoriales anteriores y del presente que se esta leyendo.**********************************************************
Insertamos en nuestro body para tener el menu que se muestra:
<div id="uno">
<ul div="caja1">
<li id="solo3"></li>
<li id="solo2"></li>
<li id="solo1"></li>
<li id="o">Mensajes</li>
<li id="b">Servicios</li>
<li id="c">Contacto</li>
<li id="d">Producto</li>
<li id="solo4"></li>
<li id="solo5"></li>
<li id="solo6"></li>
</ul>
</div>
body{
background:#1a1a1a;
}
/*El elemento de lista ul y li son reseteado para no tener ningun estilo de lista */
ul, li {
list-style:none;
}
/*Configuarmoa algunos estilos del elemnto li, como es: el tipo y tamaño de la fuente
y el padding de nuestra caja de li*/
li{
font-family: "Comic Sans MS", cursive;
font-size:10px;
padding:15px;
display:inline-block;/*Flotamos los elementos*/
vertical-align: top;/*Evitar problemas de alineacion*/
}
/*Ingresamos valores iniciales a los elementos li de id="o" como son la sombra (shadow), la rotacion del elemento, el ancho, alto y el color de fondo*/
#o{
box-shadow:2px 5px 25px #333333;
-moz-box-shadow:2px 5px 25px #FFF;
webkit-box-shadow:2px 5px 25px #FFF;
width:40px;
height:40px;
background:#06F;
-moz-transform: rotate(10deg) ;
-webkit-transform: rotate(10deg);
-o-transform: rotate(10deg);
-ms-transform: rotate(10deg);
}
/*Ingresamos valores cuando el puntero ingresa al elemnto li, en esta parte es usado la propiedad scale que a parte de expandirse tambien girara al elemento inclinado, poniendolo en posicion natural sin la propiedad rotate.*/
#o:hover{
-moz-transform: scale(3) ;
-webkit-transform: scale(3);
-o-transform: scale(3);
-ms-transform: scale(3);
transform: scale(0.5);
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
-o-transition: all 0.5s;
-ms-transition: all 0.5s;
transition: all 0.5s;
text-decoration: underline;/*Se muestra una linea en el texto*/
}
/*Ingresamos valores iniciales a los elementos li de id="b" como son la sombra, la rotacion del elemento y la transicion de la animacion que es de un segundo.*/
#b{
transform: rotate(350deg) ;
-moz-transform: rotate(350deg) ;
-webkit-transform: rotate(350deg);
-o-transform: rotate(350deg);
-ms-transform: rotate(350deg);
box-shadow:2px 5px 25px #333333;
-moz-box-shadow:2px 5px 25px #FFF;
webkit-box-shadow:2px 5px 25px #FFF;
width:40px;
height:40px;
background: #FFF;
-webkit-transition-duration:1s;//Velocidad de giro
-o-transition-duration:1s;
-moz-transition-duration:1s;
transition-duration:1s;
}
/*Ingresamos valores cuando el puntero ingresa al elemnto li, en esta parte es usado la propiedad scale que a parte de expandirse 3 tambien girara al elemento inclinado, poniendolo en posicion natural sin la propiedad rotate.*/
#b:hover{
text-decoration: underline;
-moz-transform: scale(3);
-webkit-transform: scale(3);
-o-transform: scale(3);
-ms-transform: scale(3);
z-index: 10 !important;
position: relative;
}
/*Ingresamos valores iniciales a los elementos li de id="c" como son la sombra (shadow), la rotacion del elemento, el ancho, alto y el color de fondo*/
#c{
transform: rotate(10deg) ;
-moz-transform: rotate(10deg) ;
-webkit-transform: rotate(10deg);
-o-transform: rotate(10deg);
-ms-transform: rotate(10deg);
text-decoration: underline;
box-shadow:2px 5px 25px #333333;
-moz-box-shadow:2px 5px 25px #FFF;
webkit-box-shadow:2px 5px 25px #FFF;
width:40px;
height:40px;
background:#06F;
}
/*Ingresamos valores cuando el puntero ingresa al elemnto li, en esta parte es usado la propiedad scale que a parte de expandirse tambien girara al elemento inclinado, poniendolo en posicion natural sin la propiedad rotate.*/
#c:hover{
text-decoration: underline;
-moz-transform: scale(3) ;
-webkit-transform: scale(3) ;
-o-transform: scale(3) ;
-ms-transform: scale(3) ;
z-index: 10 !important;/*Para que no quede atras de los elemento que le preceden, evitando su choque*/
position: relative;/*Posicionando la caja para ayudar a z-index, esta hace que su caja salga de su contexto*/
}
/*Ingresamos valores iniciales a los elementos li de id="d" como son la sombra (shadow), la rotacion del elemento, el ancho, alto y el color de fondo. Tambien agregamos el tiempo de transicion*/
#d{
transform: rotate(350deg) ;
-moz-transform: rotate(350deg) ;
-webkit-transform: rotate(350deg);
-o-transform: rotate(350deg);
-ms-transform: rotate(350deg);
box-shadow:2px 5px 25px #333333;
-moz-box-shadow:2px 5px 25px #FFF;
webkit-box-shadow:2px 5px 25px #FFF;
width:40px;
height:40px;
background:#fff;
-moz-transition: all 0.2s;
-webkit-transition: all 0.2s;
-o-transition: all 0.2s;
-ms-transition: all 0.2s;
transition: all 0.2s;
}
/*Ingresamos valores cuando el puntero ingresa al elemnto li, en esta parte es usado la propiedad scale que a parte de expandirse tambien girara al elemento inclinado, poniendolo en posicion natural sin la propiedad rotate.*/
#d:hover{
-moz-transform: scale(3);
-webkit-transform: scale(3);
-o-transform: scale(3);
-ms-transform: scale(3);
transform: scale(3);
text-decoration: underline;
z-index: 10 !important;
position: relative;
}
/*Ingresamos valores a elementos que no tienen animacion al ingresar el raton, solo tenemos condiciones iniciales como la rotacion de elemento, el tamano del elemnto li, la sombra y el color del fondo*/
#solo1{
box-shadow:0px 2px 15px #333333;
-moz-box-shadow:0px 2px 15px #333333;
webkit-box-shadow:0px 2px 15px #333333;
width:20px;
height:20px;
background:#FFF;}
/*Ingresamos valores a elementos que no tienen animacion al ingresar el raton, solo tenemos condiciones iniciales como la rotacion de elemento, el tamano del elemnto li, la sombra y el color del fondo*/
#solo2{
box-shadow:0px 2px 15px #333333;
-moz-box-shadow:0px 2px 15px #333333;
webkit-box-shadow:0px 2px 15px #333333;
-webkit-transform: rotate(100deg);
-o-transform: rotate(100deg);
-ms-transform: rotate(100deg);
width:10px;
height:10px;
background:#06F;
}
/*Ingresamos valores a elementos que no tienen animacion al ingresar el raton, solo tenemos condiciones iniciales como la rotacion de elemento, el tamano del elemnto li, la sombra y el color del fondo*/
#solo3{
box-shadow:0px 2px 15px #333333;
-moz-box-shadow:0px 2px 15px #333333;
webkit-box-shadow:0px 2px 15px #333333;
-webkit-transform: rotate(100deg);
-o-transform: rotate(100deg);
-ms-transform: rotate(100deg);
width:5px;
height:5px;
background:#FFF;
}
#uno{
padding:5px;
margin:100px;
width:590px;
height:100px;
background-image: url(../../../Documents/neon/Luces/SCALE3.jpg)/*insertamos la imagen que queramos */
}
/*Ingresamos valores a elementos que no tienen animacion al ingresar el raton, solo tenemos condiciones iniciales como la rotacion de elemento, el tamano del elemnto li, la sombra y el color del fondo*/
#solo4{
box-shadow:0px 2px 15px #333333;
-moz-box-shadow:0px 2px 15px #333333;
webkit-box-shadow:0px 2px 15px #333333;
width:20px;
height:20px;
background:#06F;
}
/*Ingresamos valores a elementos que no tienen animacion al ingresar el raton, solo tenemos condiciones iniciales como la rotacion de elemento, el tamano del elemnto li, la sombra y el color del fondo*/
#solo5{
box-shadow:0px 2px 15px #333333;
-moz-box-shadow:0px 2px 15px #333333;
webkit-box-shadow:0px 2px 15px #333333;
-webkit-transform: rotate(100deg);
-o-transform: rotate(100deg);
-ms-transform: rotate(100deg);
width:10px;
height:10px;
background:#fff;
}
/*Ingresamos valores a elementos que no tienen animacion al ingresar el raton, solo tenemos condiciones iniciales como la rotacion de elemento, el tamano del elemnto li, la sombra y el color del fondo*/
#solo6{
box-shadow:0px 2px 15px #333333;
-moz-box-shadow:0px 2px 15px #333333;
webkit-box-shadow:0px 2px 15px #333333;
-webkit-transform: rotate(100deg);
-o-transform: rotate(100deg);
-ms-transform: rotate(100deg);
width:5px;
height:5px;
background:#06F;
}
Es bastante el código que se plantea, los cuadro que se encuentran en los lados laterales se giran con nuestras cascadas que dicen solo5, solo6 etc. El menu quedaria de la siguiente manera:
- Mensajes
- Servicios
- Contacto
- Producto
No hay comentarios:
Publicar un comentario