2D效果 transform相关实例（微重点）

2D效果

在前面阶段结束以后（之前的博客），进入到了移动端开发阶段，这个阶段主要是学习移动端的布局，以及CS3中2D,3D的相关知识，最近敲了几个相关2D的例子，讲讲实现的心得。

相关知识：

1. transform：translate（x,y）; 向右向下偏移，在这里有一个微重点 。 如果x,y的值设置为百分比的格式时，假如设置成了translate(50%,50%),如果浏览器中只有这一个盒子，你肯定会以为这个会显示在浏览器中央，其实不是的，这个属性是以自身的高宽为基准的，也就是自己的高的50%，宽的50%。
2. transform：rotate(deg); 值为度数，效果为顺时针旋转，不过此时的旋转点默认为这个旋转对象的中心点，他常常与translate-oragin:(x,y)连用，改变他的旋转点，x,y为坐标，定位他的旋转点。
3. transform:scale(x,y);值为向x轴y轴延长多少倍，也可以是px，一般都是倍数，px大家都比较熟悉了。倍数怎么填呢？ eg: (1,1)代表是大小不变，（2,2相当于扩大为原来的二倍；

transform：translate（x,y）;
没有设置以前的效果：
给子盒子设置：transform: translate(50%, 50%); （很显然移动了小盒子自身的50%）;

transform：rotate(deg);
旋转以前：

旋转：transform: rotate(45deg); 以后（显然是以小盒子中心点来旋转的）

transform:scale(x,y);
给小盒子一个transform: scale(1.1); 很显然是不变的，因为1代表自身大小的1倍；

给小盒子一个transform: scale(2.2); 显然变成了自身大小的二倍（而且是向四周的同时扩大，并且不会影响到其他的盒子）

学习了2以后能实现哪些常用的实例呢！？
比如京东的商品模块，鼠标放上去盒子向上向左偏移一点儿，盒子底下出现阴影，并且会在盒子底部慢慢淡入淡出一个小简介盒子。 (当然淡入淡出这个实现是 opcity=0 渐变到 1 实现的)，到之后直接设置transion:all 0.3s 渐变的速度;即可；
如下图：
如图：鼠标放上去之前。

鼠标放上去以后：(阴影上涨的瞬间截的图)

<style>
        .bigbox {
            position: relative;
            width: 60px;
            height: 30px;
            text-align: center;
            line-height: 30px;
            border: 1px solid black;
            border-radius: 15px;
            overflow: hidden;
            z-index: 1;        //  调节层级，为了实现鼠标放上去能让下方的盒子压着这个盒子
        }
        
        .bigbox .sonbox {
            position: absolute;
            bottom: 0;
            left: 0;
            height: 0;
            width: 100%;
            opacity: 0;               // 为了实现淡出淡出，从0---1的过程
            z-index: 2;               // 上方的盒子，层级高一点
            background-color: rgba(162, 155, 155, .3);
            transition: all 0.3s linear;                        
        }
        
        .bigbox:hover .sonbox {
            height: 30px;           
            opacity: 1;              //  淡入淡出
        }
    </style>



<div class="bigbox">
        搜搜
        <div class="sonbox"></div>
</div>

某东购物商品模块：（鼠标放上去以前）

鼠标放上去以后：

代码：在这里我就不放了，鼠标放上去之前大家都会，摆盒子嘛。鼠标放上去以后实现的就是上面的第一个例子的效果，会有一个盒子从下方淡入淡出。