转换（位移、旋转等）：-CSDN博客

本文链接：https://blog.csdn.net/luoyuanye2003110/article/details/127988848

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title></title>
       <style type="text/css">
           *{
               margin: 0;
               padding: 0;
           }
           .box{
               width: 200px;
               height: 200px;
               background: deeppink;
               margin:200px auto;
               transition: all 5s;
           }
           /* transform:转换
           translate():位移
           rotate():旋转，单位deg
           scale()：缩放，没有单位，都是倍数,数字大于1是放大，在0到1之间是缩小
           skew():斜切，单位deg
           transform-origin:方位词
           */
           .box:hover{
               /* transform: translateX(1200px) translateY(200px); 位移*/
               /* transform: rotate(95deg) ; 旋转*/
               /* transform: scale(3) ;缩放 */
               /* scale(0.5,2):x轴缩小0.5倍,Y轴放大2倍 */
               /* transform: skew(80deg) ;
               border-radius: 100%; */
               transform: rotate(120deg);
               transform-origin:80% 100% /* left top */;
           }
           </style>
       </style>
   </head>
   <body>
       <div class="box">2003</div>

       </div>
   </body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.box{
				width: 200px;
				height: 200px;
				background: deeppink;
				margin:200px auto;
				transition:  all 5s;
			}
			/* transform:转换
			translate():位移 
			rotate():旋转，单位deg
			scale()：缩放，没有单位，都是倍数,数字大于1是放大，在0到1之间是缩小
			skew():斜切，单位deg
			transform-origin:方位词
			*/
			.box:hover{
				/* transform: translateX(1200px) translateY(200px); 位移*/
				/* transform: rotate(95deg) ; 旋转*/
				/* transform: scale(3) ;缩放 */
				/* scale(0.5,2):x轴缩小0.5倍,Y轴放大2倍 */
				/* transform: skew(80deg) ;
				border-radius: 100%; */
				transform: rotate(120deg);
				transform-origin:80% 100% /* left top */;
			}	
			</style>
		</style>
	</head>
	<body>
		<div class="box">2003</div>
			
		</div>
	</body>
</html>