ヾ(⌐ ■_■)— HTML-动画和布局

transform:rotate(30deg); 旋转动画，旋转30度（负值为逆时针方向旋转，正值为逆时针方向旋转）
transform:translate(50px,100px) 移动动画，把元素从左侧移动 50 像素，从顶端移动 100 像素（第一个数字控制左右方向，第二个数字控制上下方向！也可以分开控制！如translateX（50px）；translateY（50px）；translateZ（50px）；）
transform:scale(2,4) 图片缩放动画，把宽度转换为原始尺寸的 2 倍，把高度转换为原始高度的 4 倍（数字比一小为缩小图片，数字比一大为放大图片，也可放入单独的数字）
transform:skew(30deg,20deg) 扭曲动画，围绕 X 轴把元素翻转 30 度，围绕 Y 轴翻转 20 度


<html>
  <style>
 #wai {
 				height: 200px;
 				width: 200px;
 				border: 1px black solid;
 				display: flex;
 				/*  垂直居中 */
 				align-items: center;
 				/*  水平居中 */
 				justify-content: center;
 
 			}
 
 			#wai:hover>#nei {
 				-moz-transform-origin: 0% 0%;
                 /*  旋转 */
 				transform: rotate(10deg);
 
                /*  
                    移动   transform:translate(20px,50px);
                    缩放   transform: scale(1.3,1.3);
                */
 			}
                
 			#nei {
 				-moz-transform-origin: 0% 0%;
 			}
 
 			img {
 				height:

相关阅读:
Redis 哨兵集群工作原理
使用粒子群优化进化神经网络
多线程——(Callable)(Future)(CompletableFuture)
【LLM】浅谈 StreamingLLM中的attention sink和sink token
优思学院｜精益和六西格玛如何改变你的工作能力？
Ubuntu LTS 坚持 10 年更新不动摇
rocketMQ之TIMEOUT_CLEAN_QUEUE异常
电商API接口与数据分析、数据挖掘的结合
面试官问你的项目经验，这样说指定给你加分
Redis数据库管理工具Redis Desktop Manager最新中文

原文地址：https://blog.csdn.net/naoguoteng/article/details/127941213

ヾ(⌐ ■_■)— HTML-动画和布局

目录

一、动画部分

1、放大缩小位移（transform）

ヾ(⌐ ■_■)— HTML-动画和布局

目 录

一、动画部分

1、放大缩小位移（transform）

目录