Antes de comenzar, prepararemos nuestro espacio de trabajo para poder operar con objetos 3D. Lo primero que haremos es definir la perspectiva del elemento padre (es decir: el que tendrá en su interior a los elementos con efectos 3D). Esto se realiza a través de la propiedad de CSS llamada perspective. Esta propiedad define a cuánta distancia están los elementos 3D de la vista.
A continuación, diremos que queremos preservar las propiedades 3D de los hijos y descendientes de los elementos con transformaciones en 3 dimensiones. Esto lo logramos con transform-style: preserve-3d.
https://codepen.io/lucasmourelle/pen/Cenfy
Hoy en dia , todos los desarrolladores de sitios web , mediante avanza la tecnologia viene mas sostificada , la forma en que se programa cierto sistema.
Bien , una vez ya explicado esto , comenzemos nuestro proyecto como ven nosotros estaremos realizando la siguiente imagen la cual la convertiremos en una imagen en 3D.
Como ven esta imagen es la que estaremos realizando , vamos a darle un estilo hover.
<!DOCTYPE html>
<html>
<head>
<title>Bienvenidos</title>
<link rel="stylesheet" type="text/css" href="estilos.css"> //llamados estilos
</head>
<body>
<div id="container"> esta es una de las id a utilizar en el video
<img src="imagen01.jpg" alt="imagen" id="imagen" width="700"> aquí llamamos la imagen le damos un largo y listo, aqui en html , ya no tenemos que escribir nada más .
</div>
</body>
</html>
Ahora bien , vamos con los estilos css:
Como es de costumbre de todo programador , lo primero que hacemos es quitar bordes y margenes de la pagina.
es este caso no lo haremos: ya que estaremos trabajando con perpective y es casi no muy recomendable , pero bien continuemos.
body{
background-color: #2F3B40;
} el body es para darle el color ala pagina completa
#container{
perspective: 500px;
width: 700px;
margin: 200px auto;
} el container es la clase principal
#imagen{
transition: all 1s;
}la transicion que contendra la imagen al pasar el mouse
#imagen:hover{
transform: translateZ(200px) scaleZ(2);
}por ultimo le damos un hover . y listo nos quedaria asi.
Descargas
Información
servidor : mega
peso: 2mb
contraseña : sin contraseña
DD
Hola mi nombre es Agustin ,soy informático desde los 15 años, soy apasionado ala informatica. 
No hay comentarios.:
Publicar un comentario