html 2D变换

Posted 2021-05-11

<!-- CSS 2D Transform
      simple ways to move, rotate, scale, and skew elements in two-dimensional or three-dimensional space
-->

<div class="wrap">
		<div class="box">
			<img class="mike" src="mike.png">
		</div>
	</div>


<style>
/*  */

.box {
	margin: auto;
	width: 150px;
	background: url('mike-transparent.png') no-repeat 0 0;
	background-size: 150px;
}
.mike {
	display: block;
	width: 100%;
	transition: 1s ease-in-out;
}

.wrap:hover .mike {
	-webkit-transform: rotate(2turn);
	-webkit-transform-origin: 100% 100%; 
	/* origin = 50% 50% default it rotate on the center - 100% 100% rotate from the bottom of the image  
	top right - top left;*/
}

/* rotate(45deg) - postivite value rotate clock wise to right - rotate(-45deg) left
   rotate(400grad) full circle 360 - 200 half rotate
   rotate(1rad) = 57 deg - rotate(3.14rad) = 180 deg - rotate(6.28rad) = full circle
   rotate(1turn) = full rotation -  rotate(.5turn) = half rotation (180deg)
    */


.wrap:hover .mike {
	-webkit-transform: scaleX(1.5); 
	 /*  both -webkit-transform: scale(1.5);  -webkit-transform: scaleX(1.5); */
	 -webkit-transform: skewX(45deg);  
	 /*  both -webkit-transform: skewY(-45deg);  */
	 -webkit-transform:translateX(200px);  
	 /*  X from left to right - negative value to left - 100% move image depende of the size 100% from its origin positional*/

	 /* shorthand */
	 -webkit-transform: scale(1.5) rotate(25deg) translateX(50%, -25%); 

     /* prefix */
	 -webkit-transform: scale(1.5) rotate(360deg) translateX(50%);
	 -moz-transform: scale(1.5) rotate(360deg) translateX(50%);
	 -ms-transform: scale(1.5) rotate(360deg) translateX(50%);
	 -o-transform: scale(1.5) rotate(360deg) translateX(50%);
	 transform: scale(1.5) rotate(360deg) translateX(50%);
}

</style>