![CSS 点击按钮以后修改DIV的高度，代码怎么写？[有代码]](/aiimages/CSS+%E7%82%B9%E5%87%BB%E6%8C%89%E9%92%AE%E4%BB%A5%E5%90%8E%E4%BF%AE%E6%94%B9DIV%E7%9A%84%E9%AB%98%E5%BA%A6%EF%BC%8C%E4%BB%A3%E7%A0%81%E6%80%8E%E4%B9%88%E5%86%99%EF%BC%9F%5B%E6%9C%89%E4%BB%A3%E7%A0%81%5D.png)
transform默认是左上角为起点的,除非是手动设置了
transform-origin 属性允许您改变被转换元素的位置。2D 转换元素能够改变元素 x 和 y 轴。3D 转换元素还能改变其 Z 轴。 transform-origin: x-axis y-axis z-axis
值描述
x-axis 定义视图被置于 X 轴的何处。可能的值：left | center | right | length | %
y-axis 定义视图被置于 Y 轴的何处。可能的值：top | center| bottom | length |%
z-axis 定义视图被置于 Z 轴的何处。可能的值：length
transform是css3中对于性能来说是比较安全的
在二维空间里面，skew有两个属性值：skewX,skewY,图形的变化也就是针对这两个值来操作；
transform: skewX(45deg)；
可以看到demo标签向左倾斜45度产生的形变，那么为什么会产生这个形变呢？
因为demo的高度是不变的，只要倾斜角度不是180的倍数，demo的高度始终保持原有的高度，所以只能拉长本身，产生形变；（围绕X轴倾斜，保持高度不变，围绕Y轴，保持宽度不变）
为什么说不是180的倍数呢？原因很简单，如果是180的倍数，demo元素将不可见。
transform: skew(45deg，45deg)
注意：两张图片的围绕中心点不同，这个默认值是图一
