和cool一起学前端----第五天

css3详解之transform

上一节就简单介绍了下2d转化的基本变化，平移，旋转，缩放，今天就给大家详细介绍下，css3的知识，每个点都作为一篇文章，着重介绍，也是给自己复习了。
对于2d转化，有一个样式叫做transform-origin,这个就是设置中心点的位置的，默认的就是元素的中间的位置，默认值也就是50% 50%；比如说旋转变化，我们旋转的时候是按照我们设置的这个点将元素进行旋转相应的角度，看代码

<div style="width: 500px; height:500px; border: 1px solid #333; margin:100px">
    <div style="width: 100px; height:150px; transform: rotate(45deg); transform-origin: left top; background: red"></div>
</div>

所以呢，将元素旋转之前一定要找好一个基点，这个是非常重要的。

再来看看缩放的效果

<div style="width: 500px; height:500px; border: 1px solid #333; margin:100px">
    <div style="width: 100px; height:150px; transform: scale(1.5,2); transform-origin: right center; background: green;"></div>
</div>

如果我们缩小呢，再来看看代码

<div style="width: 500px; height:500px; border: 1px solid #333; margin:100px">
   <div style="width: 100px; height:150px; transform: scale(0.5,2); transform-origin: left top; background: green;"></div>
</div>

可能会有人不理解为啥第二个y轴放大的时候不向上面放大，在我看来啊，因为我们找的几点是原始元素的左上点，这个已经是元素向上的边界点了，如果再向上放大的话，那放大之后的中心点的位置是不是就改变了呢，不管是2d怎么变化，你一开始设置的中心点的位置在2d变化之后都不能改变。
当然了，对于平移来说，设置中心点的位置就没有必要了，使用默认的就可以了，因为平移并没有改变元素的大小状态，所以他的中心点再怎么设置，无论你怎么平移都不会放生改变。

<div style="width: 500px; height:500px; border: 1px solid #333; margin:100px">
    <div style="width: 100px; height:150px; transform: translate(100px,150px); transform-origin: left bottom; background: purple;"></div>
</div>

当然了除了2d转化，还有3d转化，这里也就不多说了，觉得有意思的可以多去尝试着写一写，都是差不多的东西，都是找基点，然后开始转化操作，又不清楚的可以给我留言，今天分享的内容就到这儿了