transform: translate(参数1，参数2)；让元素在X轴与Y轴方向发生偏移-->参数1：X；参数2：Y rotate(参数1)；让元素进行旋转；单位(deg) scale(参数1，参数2)；让元素在X轴与Y轴放大或缩小多少倍-->参数1：X； ...
transform:
translate(参数1，参数2)；让元素在X轴与Y轴方向发生偏移-->参数1：X；参数2：Y
rotate(参数1)；让元素进行旋转；单位(deg)
scale(参数1，参数2)；让元素在X轴与Y轴放大或缩小多少倍-->参数1：X；参数2：Y
skew(参数1，参数2)；skew(30deg,20deg)-->围绕 X 轴把元素翻转 30 度，围绕 Y 轴翻转 20 度
transition:过渡效果
transition: all 1s linear 3s;
*过渡效果
参数1：用来指定对那些属性使用过渡效果 参数2：过渡效果的持续时间 参数3：过渡效果的显示速度变化 参数4：用来指定过渡效果的延迟时间*/
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <style> #div1{ width: 100px; height: 100px; /*过渡效果 参数1：用来指定对那些属性使用过渡效果 参数2：过渡效果的持续时间 参数3：过渡效果的显示速度变化 参数4：用来指定过渡效果的延迟时间*/ transition: all 1s linear 3s; border: 1px solid red; margin: auto; background-image: url("../../../img/f3_Android1.png"); background-size: 100% 100%; } #div1:hover{ /*translate：让元素在X和Y轴发生偏移 参数1：X轴方向偏移 参数2：Y轴方向偏移 translatex:让元素在X轴方向发生偏移 translatey:让元素在Y轴方向发生偏移*/ /*transform: translate(50px,0);*/ /*scale:让元素在X轴和Y轴都发生缩放 参数1：X轴方向的方法倍数 参数2：Y轴方向的放大倍数 scaleX：让元素在X轴方向发生缩放 scaleY：让元素在Y轴方向发生缩放*/ transform: scaleX(1.5); /*rotate：让你的元素按照指定的中心点进行旋转 rotateX:让元素沿着X轴旋转 rotateY：让元素沿着Y轴旋转 */ /*transform: rotateY(180deg);*/ /*transform: skewY(-90deg);*/ /*transform-origin:用来设置旋转的中心点*/ /*transform-origin: left;*/ } </style> <title>变形效果</title></head><body><div id="div1"></div></body></html>
海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理：https://www.xlkjsw.com
原标题：01.CSS动画
关键词：CSS
*特别声明：以上内容来自于网络收集，著作权属原作者所有，如有侵权，请联系我们：
admin#shaoqun.com
（#换成@）。
