web前段进阶:＜1＞平面变换和3d变换

这一个专栏同样也是给有一定基础的人看的，我们主要实现css的美化效果，包含各种变换、动画，当然我们后面还会介绍如何制作一张精美的网页，还有流行的布局方式，总而言之，就是属于前段进阶的学习，大家如果想要自己的网页像现在的电商网页那样精美，那就好好的将本专栏的知识点学好，一步一个脚印的将我们的小项目做好就可以，好，废话不多说，我们开始；

1、首先，我介绍一个使用字体图标的方法给大家，我们经常在电商网站看到各种各样的图标，

如果要我们去用ps抠，天哪，不可想像的麻烦；现在，我告诉大家，不需要，我们可以到阿里巴巴矢量图标网里面去下载：

我们可以在这个网站挑选我们想要的各种图标，然后加入购物车，加到自己的项目，需要先登录，没有就注册一个，然后下载到本地就可以；

解压我们下载的文件，可以拿到:

可以看到有一个iconfont.css文件，我们在写项目的时候引入它就可以：

<link rel="stylesheet" href="../iconfont/iconfont.css">

 使用也很简单，我们设置盒子的class值，第一个为iconfont，我们知道只需要空格加上其他类就可以同时用多个类；

这里还有一个demo_index.html，我们打开它：

 

然后 点击Fontclass,复制想要的图标的类，就是.后面的字符串，然后加到我们想要设置的图标的盒子的class后面，注意，第一个一定是iconfont ;

 <div class=" iconfont nav icon-qunliao"><h1>今日电影盘点</h1></div>

注意要加，不然的话显示会异常；

 2、那我们开始介绍一下平面的转换，含有三个：位移、旋转、缩放；它们共用一个属性：transform；在使用转换的时候，通常用到过渡效果：

transition: all 0.5s;过渡效果

位移：

transform: translate(30px,20px);

当我们想使用鼠标hover效果但是实现动作的盒子不是本身怎么办？

简单，直接后面加上盒子就可以：

 .head:hover::after{
            transform: translateX(100%);
        }
 .head:hover::before{
            transform: translateX(-100%);
    }
.head:hover img{
    transform: translateX(-100%);
}

旋转：

transform: rotate(360deg);

注意我们使用的单位是deg，参数是角度

我们一般都会将位移和旋转结合起来使用，所以我们使用到transform的复合属性

transform: translate(800px) rotate(360deg);

注意这个位置是不能更换的，因为旋转会更改x、y的方向，导致我们的盒子乱飞；

还有不能分开写，因为css具有层叠性；

缩放：

transform: translate(-50%,-50%)  scale(8);

缩放也是同样的属性，transform，不过是用的是scale（）参数是一个倍数，可以是大于1放大，小于1缩小；

注意这个复合写法，顺序不能乱

transform有一个特点就是层叠性，我们知道transform的属性比较多，所以如果我们在写多个属性的时候有hover，就一定要带上所有transform属性，不可以单改一个地方：

   .one li::after{
​
            width:39px;
            height:39px;
            position: absolute;
            top:50%;
            left:50%;
            content: '';
            transition: all .5s;
            background:url(../images/play.png) no-repeat;
            opacity: 0;
            transform: translate(-50%,-50%)  scale(8);
        }
​
        .one li:hover::after{
            opacity: 1;
            transform: translate(-50%,-50%) scale(1);
        }
我们可以看到很多的旋转方式，钟表的指针旋转你会吗?

加上一个旋转原点试试（transform-origin）：

.box2 {
    width:100px;
    height:100px;
    margin: 20px auto;
    transform-origin: left top;
    background-color: pink;
    
}
.box2:hover{
    transform: translateZ(100px) rotate(360deg);
}
​

还有一个技巧，就是渐变，它常常用来做遮罩：

.one .mask{
    height: 100%;
    width: 100%;
    position: absolute;
    left: 0px;
    top: 0px;
    opacity: 0;
    background-image: linear-gradient(
        transparent,
        rgba(0,0,0,.4)
    );
    transition: all .5s;
}

而在制作遮罩的时候我们通常要结合定位使用，因为遮罩层需要盖在其他盒子上面；

而渐变主要使用的是这个属性：

    background-image: linear-gradient(
        transparent,
        rgba(0,0,0,.6)
    );

这个模式一般用得比较多: 设置透明到半透明显示，记住是背景图片的linear-gradient属性，后面添加渐变的颜色使用逗号隔开即可；

好了，讲完渐变，我们试着结合起来做一个案例：

 <div class="one">
               <div class="pic">
                        <img src="../images/head.jpg" alt="">
                </div>
    
               <div class="text">
                        <h6>简介</h6>
                        <p>[魔童降世]是一部国产的动漫大电影，其。。。。。。</p>
                        <h5>了解更多</h5>
                        <i class="iconfont icon-icon-arrow-up"></i>
                </div>
                <div class="mask"></div>
 </div> 

我给出了盒子的主体结构，我们使用定位在one上面，然后最后一个mask就可以遮罩了，然后图片适应盒子大小就可以，这里使用了字体图标，在i上面：

.one {
    position: relative;
    padding:  10px 10px 0px 10px;
    width:100%;
    height:100%;
    overflow: hidden ;
    margin:100px auto;
    text-align: left;
}

.one  p{
    margin-top: 5px;
    
}

.one .mask{
    height: 100%;
    width: 100%;
    position: absolute;
    left: 0px;
    top: 0px;
    opacity: 0;
    background-image: linear-gradient(
        transparent,
        rgba(0,0,0,.4)
    );
    transition: all .5s;
}
.one:hover .mask{
    opacity: 1;
}

当然我这里的盒子给的100%是因为外面有li，当然你们就不要这样了，你们直接填一个具体的数值就可以，相信大家这些代码都看得懂，那些过渡效果啊，文字排版啊我就不过多赘述，效果如下，大家可以试着做一下，知识点全部给出，代码可以借鉴：

 3、3d变换

当我们学完了平面转换之后，是时候来了解一下3d了，无非就是在平面的基础上，也就是x、y轴的基础上添加了一根z轴，然后再使用

 perspective: 1000px;

给元素添加一个近大远小的3d透视效果；这个属性也叫作视距，我们距离屏幕的距离，盒子往我们这边移动是正，往屏幕后面移动是负；

.cube .font{
    transform: translateZ(100px);
}
.cube .behinde{
    background-color: pink;
    transform: translateZ(-100px);
}

当然，z轴的位置就是屏幕向外的位置；

但是想要在平面上展示3d效果有这个不够，还需要真正放在3d空间内进行展示，所以我们就在需要展示的父元素上添加一个属性来将子元素放在三维空间：

transform-style: preserve-3d;

对了，我们在制作3d效果的时候还使用了子绝父相的定位效果，因为我们需要给与盒子足够的自由度才可以让它们自由在三维空间中运动；

左手定则判断旋转方向，就是我们的盒子沿着哪一条轴旋转，然后左手大拇指指向该轴，四指弯曲的方向就为正；

我们的案例就先不做，怕大家因为知识太多吸收不了，大家今天就先学好这些知识，可以试着做一下3d魔方的效果；

那这一期就到这，下期见；