<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Document</title></head><style> ???div{ ???????height: 300px; ???????width: 500px; ???????background-color: red; ???????margin:100px auto; ???????/*设置中心点*/transform-origin: center center; ???????/*设置阴影*/ ???????box-shadow: 2px 2px 2px #ccc; ???} ???/*开始动*/ ???div:hover{ ???????/*2d旋转的效果*/ ???????????/* transform: rotate(30deg); */ ?/*deg是角度*/ ???????/*3d旋转的效果*/ ??????????????transform: rotateX(50deg); ??/*绕x轴3d旋转*/ ???????/*放大和缩小*/ ???????????/* transform:scale(0.5); */ /* ?缩放0.5倍 */ ???????????/* transform:scale(1.2); */ ?/*放大到1.2倍 */ ????????????/* transform:scaleY(1.2); ?*//*在y轴的方向放大到1.2倍*/ ???????????/* transform:scale(2,3); */ ?/*在X轴放大到2倍，在y轴放大到3倍*/ ???????/*旋转的效果*/ ???????????transition: all 2s; ?/*2s内完成效果*/ ???}</style><body> ???<div class="box"> ???????</div></body><script></script></html>前端联系9（CSS的动画效果和过渡）
原文地址：https://www.cnblogs.com/cl94/p/10311331.html