TODO HOVER: Efecto: Rotar animación de imagen al pasar el mouse


    Fuente:  <a href="https://stackoverflow.com/questions/44509457/hover-rotation-css-keep-position-on-uncover" target="_blank" rel="no openner no referrer">  https://stackoverflow.com/questions/44509457/hover-rotation-css-keep-position-on-uncover </a>
    
    
    <style>.rotate {
  width: 20px;
  height: 100px;
  background: blue;
  transition: 0.9s;
  transform: rotate(0deg);
}

.rotate:hover {
  transform: rotate(180deg);
}

body {
  padding: 100px;
}
 </style>
 
<div class="test" style="width:300px; height:300px;">TEST</div>


<div class="rotate">
   <img src="https://www.bing.com/th?id=ABT1613545AC079060809E0C3773EDE973B4B8DD1EECD4A11DBE9BCE6D547C80A48&w=608&h=200&c=2&rs=1&o=6&dpr=1.1&pid=SANGAM" alt="photo" width="550" height="367">
</div>

2D Rotate Y axis

Estos efectos tienen fueron extraídos de la siguiente Fuente: https://codeconvey.com/

2D Rotate X axis

3D Rotate 360deg

Fuente:  <a href="https://codeconvey.com/css-rotate-image-animation-on-hover/" target="_blank" rel="no openner no referrer">  https://codeconvey.com/css-rotate-image-animation-on-hover/ </a>
 <p>2D Rotate  X axis</p>
<div class="image_box rotateX">
   <img src="https://codeconvey.com/Tutorials/css-rotate-image-animation-on-hover/image/image-2.jpg" alt="image 2D Rotate  X axis">
</div>

<p>2D Rotate Y axis</p>
<div class="image_box rotateY"> 
   <img src="https://codeconvey.com/Tutorials/css-rotate-image-animation-on-hover/image/image-1.jpg" alt="image 2D Rotate Y axis">
</div>
<p>3D Rotate 360deg</p>
<div class="image_box rotate"> 
   <img src="https://codeconvey.com/Tutorials/css-rotate-image-animation-on-hover/image/image-3.jpg" alt="image 3 rotate 360">
</div>
<style>
.image_box {
    width: 80%;
    max-width: 640px;
    margin: 0 auto;
	padding: 24px;
	border-radius: 5px;
    background-color: #f2f2f2;
	box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);
	cursor: pointer;
}
.image_box img {
	width: 100%;
	height: auto;
}
.rotate:hover {
	transform: rotate(360deg);
	-moz-transform: rotate(360deg);
	-webkit-transform: rotate(360deg);
	transform-origin: center;
	-moz-transform-origin: center;
	-webkit-transform-origin: center;
	transition:  2s ease all;
	-moz-transition: 2s ease all;
	-webkit-transition:  2s ease all;
}
.rotateY:hover {
	transform: rotateY(360deg);
	-moz-transform: rotateY(360deg);
	-webkit-transform: rotateY(360deg);
	transform-origin: center;
	-moz-transform-origin: center;
	-webkit-transform-origin: center;
	transition: 2.0s ease;
	-moz-transition: 2.0s ease;
	-webkit-transition: 2.0s ease;
}

.rotateX:hover {
	transform: rotateX(360deg);
	-moz-transform: rotateX(360deg);
	-webkit-transform: rotateX(360deg);
	transform-origin: center;
	-moz-transform-origin: center;
	-webkit-transform-origin: center;
	transition: 2.0s ease;
	-moz-transition: 2.0s ease;
	-webkit-transition: 2.0s ease;
}



</style>

viernes, 3 de junio de 2022

Efecto: Rotar animación de imagen al pasar el mouse