本文主要是介绍HTML5:七天学会基础动画网页8，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
2D缩放:scale
scale(x,y) 2D缩放转换，改变元素的宽度和 高度，值为缩放的倍数。
scaleX(n) 2D缩放转换，改变元素的宽度。
scaleY(n) 2D播放转换，改变元素的高度。
跟前面提到的平移同理，后面这两个只能有一个生效，上面的会被下面的覆盖。
例:我们随便给个div
<style>
*{
margin: 0;
padding: 0;
}
.big{
width: 100px;
height: 100px;
background-color: pink;
margin: 40px auto;
}
.big:hover{
transform: scale(1,2)
}
</style>
</head>
<body>
<div class="big">
</div>
鼠标放置后变化
由此我们可知，scale括号内第一个值规定的是x轴的缩放倍数，第二个值规定的是y轴的缩放倍数，当我们只写一个值的时候宽高同时缩放:
.big:hover{
transform: scale(2)
}
我们想缩小时，这里以缩小一半为例:
transform: scale(.5)
只想x/y缩小可以
transform: scaleX(.5)
transform: scaleY(.5)
还可以用它来隐藏元素:transform: scale(0)
缩放以中心为默认原点，可以用跟上一篇旋转相同的方法改变原点:transform-origin: ……
旋转缩放可以组合到一起: transform: scale(2) rotate(45deg) 注意写到相同标签后面不然是不生效的。
2D倾斜:skew---单位是deg(角度)
skew(x-angle，y-angle) 沿x,y轴倾斜。
skewX(angle) 沿X轴倾斜。
skewY(angle) 沿y轴倾斜。
例:
.big:hover{
transform: skew(10deg,20deg)
}
这篇关于HTML5:七天学会基础动画网页8的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
