第1次尝试着写blog，不太好或有误的地区期待大伙儿多多纠正呐，今日关键写的是有关CSS3的1个关键特性transform的1些用法，这些事例是以前在慕课在网上学习培训某位老师的课程后自身敲的。
1、序言
1. transform是甚么？
transform的含意是：更改，使....形变；变换
2. transform的普遍特性有哪些？
transform的特性包含： translate()/rotate() / skew() / scale() /，各自也有x、y之分，例如：rotatex() 和 rotatey() ，以此类推。
transform:translate()
含意：变化，位移；比如向右位移20像素，向上位移50像素（向左向下为负值） 案例以下
.test01{-webkit-transform:translate(20px,50px);-moz-transform:translate(20px,50px)}
transform:rotate()
含意：转动；“deg”是表明转动的度数 比如“180deg”表明转动“180度” 案例以下
.test02{-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg)}
transform:skew()
含意：歪斜 案例以下
.test03{-webkit-transform:skew(20deg);-moz-transform:skew(20deg)}
transform:scale()
含意：占比 1.8表明以1.8的占比变大 假如是变大整数金额倍如变大3倍 务必写成3.0 案例以下
.test03{-webkit-transform:scale(2.5);-moz-transform:scale(2.5)}
3. transform的案例
demo01 表明：电脑鼠标移入后 照片左移 內容先后进到
流程：
1.写好html编码并根据css设定好內容和照片的原始款式（文本內容都在照片上）；
2.将叙述內容根据transform特性位移到左边 看不见为止（transform:translate(⑹00px,0);）；
3.接下来设定电脑鼠标移入时(:hover)的款式 一样是运用transform 使內容左移的间距为0（transform:translate(0,0)）这里用到transition-delay特性关键是以便让3个內容各自延迟时间不一样的時间 产生先后进到的实际效果。
/*照片左移 文本先后进到*/
.test1{background: #fff;}
.test1 figcaption p{background: #fff;color:#333;margin:5px 0;transform: translate(⑹00px,0px);}
.test1 figcaption{padding:20px}
.test1:hover figcaption p{transform: translate(0,0);}
.test1 figcaption p:nth-of-type(1){transition-delay: 0.2s;}
.test1 figcaption p:nth-of-type(2){transition-delay: 0.3s;}
.test1 figcaption p:nth-of-type(3){transition-delay: 0.4s;}
.test1:hover img{transform: translate(⑸px,0);}
<!--挪动-->
<figure class="test1">
<img src="img/altimg05.jpg">
<figcaption>
<h2>照片题目</h2>
<p>这里是照片的有关叙述內容</p>
<p>这里是照片的有关叙述內容</p>
<p>这里是照片的有关叙述內容</p>
</figcaption>
</figure>
demo02 表明：电脑鼠标移入后 照片变模糊不清 矩形框从照片外转动进到照片中特定部位 文本从右边飞过来 并慢慢显示信息
流程：
1.写好html编码并根据css设定好內容和照片的原始款式（矩形框文本都在照片上）；
2.将矩形框根据transform特性位移到上方 看不见为止 并设定转动的角度为0 transform: translate(0,⑷00px) rotate(0deg)；
3.接下来设定电脑鼠标移入时(:hover)的款式 位移设定为0并转动360度 transform: translate(0,0) rotate(360deg);
/*转动*/
.test2{background: #ccc;}
.test2 figcaption{width: 100%;height: 100%;}
.test2 figcaption h2{margin:15% 0 0 15%}
.test2 figcaption p{margin-left:15%;transform: translate(50px,0);opacity: 0;}
.test2 figcaption div{border:2px solid #ccc;width: 80%;height: 80%;position:absolute;top:10%;left:10%;transform: translate(0,⑷00px) rotate(0deg);}
.test2:hover figcaption div{transform: translate(0,0) rotate(360deg);}
.test2:hover img{opacity: 0.6;}
.test2:hover figcaption p{transform: translate(0,0);opacity: 1;}
<!--转动-->
<figure class="test2">
<img src="img/altimg05.jpg">
<figcaption>
<h2>照片题目</h2>
<p>飞来飞去</p>
<div></div>
</figcaption>
</figure>
demo03 表明：电脑鼠标移入后 歪曲的字一切正常显示信息（由于事例中歪曲了90度 因此视觉效果上看不见文本）
流程：
1.写好html编码并根据css设定好內容和照片的原始款式；
2.将文本內容歪曲90度 transform: skew(90deg)；
3.接下来设定电脑鼠标移入时(:hover)的款式 将文本內容歪曲0度 transform: skew(0);
/*歪曲*/
.test3{background:#CCCCCC;}
.test3 figcaption{position: absolute;left:15%;top:15%}
.test3 figcaption h2{transform: skew(90deg);}
.test3 figcaption p{transform: skew(90deg);}
.test3:hover img{opacity: 0.6;}
.test3:hover figcaption h2{transform: skew(0);}
.test3:hover figcaption p{transform: skew(0);}
<!--歪曲-->
<figure class="test3">
<img src="img/altimg05.jpg">
<figcaption>
<h2>照片题目</h2>
<p>这里是照片的有关叙述內容</p>
</figcaption>
</figure>
demo04 表明：电脑鼠标移入后 矩形框和文本显示信息并变小 照片也变小
流程：
1.写好html编码并根据css设定好內容和照片的原始款式
2.将內容变大1.2倍 这是以便电脑鼠标移入后变大倍数变为1时产生变小的实际效果 內容的全透明度设定为0；
3.接下来设定电脑鼠标移入时(:hover)的款式 內容变大倍数变为1也便是初始尺寸 照片变小 全透明度都变为1;
/*放缩*/
.test4{background: #000;}
.test4 figcaption{width: 100%;height: 100%;}
.test4 figcaption h2{margin:15% 0 0 15%;opacity:0;transform: scale(1.2);}
.test4 figcaption p{margin-left:15%;opacity:0;transform: scale(1.2);}
.test4 figcaption div{border:2px solid #ccc;width: 80%;height: 80%;position:absolute;top:10%;left:10%;transform: scale(1.2,1.2);opacity: 0;}
.test4:hover figcaption div{transform: scale(1,1);opacity: 1;}
.test4:hover img{opacity: 0.6;transform: scale(0.9,0.9);}
.test4:hover figcaption h2{opacity: 1;transform: scale(1);}
.test4:hover figcaption p{opacity: 1;transform: scale(1);}
<!--放缩-->
<figure class="test4">
<img src="img/altimg05.jpg">
<figcaption>
<h2>照片题目</h2>
<p>这里是照片的有关叙述內容</p>
<div></div>
</figcaption>
</figure>
demo05 表明：电脑鼠标移入后 內容显示信息 并出現井字格
流程：
1.写好html编码并根据css设定好內容和照片的原始款式（井字便是两个矩形框的重合）
2.将两个矩形框变小0.8 并设定全透明度为0 內容也设定全透明度为0；
3.接下来设定电脑鼠标移入时(:hover)的款式 內容全透明度设定为1 设定矩形框放缩为1 这里运用到transition特性 关键是以便变小变大全过程慢慢转变;
/*井字格*/
.test5{background: #000;}
.test5 figcaption{width: 100%;height: 100%;}
.test5 figcaption h2{margin: 15% 0 0 18%;opacity: 0;}
.test5 figcaption p{margin-left: 18%;opacity: 0;}
.test5 figcaption div{position: absolute;}
.test5 figcaption div.div01{width: 80%;height:70%;border-top: 2px solid #ccc;border-bottom: 2px solid #ccc;left:10%;top:15%;opacity: 0;transform: scale(0.8);}
.test5 figcaption div.div02{width: 70%;height:80%;border-left: 2px solid #ccc;border-right: 2px solid #ccc;left: 15%;top:10%;opacity: 0;transform: scale(0.8);}
.test5:hover div.div01{opacity: 1;transform: scale(1);transition: transform 0.3s ease-in}
.test5:hover div.div02{opacity: 1;transform: scale(1);transition: transform 0.3s ease-in}
.test5:hover figcaption p{opacity: 1;}
.test5:hover figcaption h2{opacity: 1;}
.test5:hover img{opacity: 0.6;}
<!--井字格-->
<figure class="test5">
<img src="img/altimg05.jpg">
<figcaption>
<h2>照片题目</h2>
<p>这里是照片的有关叙述內容</p>
<div class="div01"></div>
<div class="div02"></div>
</figcaption>
</figure>
以上是几个简易的小事例，之因此用figure和figcaption标识，关键是标识的词义化，截取动态性图用到的是GifCam第1次用 挺功能强大的 很讨人喜欢 哈哈。
figure标识关键是用于要求单独的流內容（照片，图表，相片，编码等）而figcaption与figure标识配套应用，关键用于界定figure元素的题目
哦，对了，因为这几个事例写在1个html里边 因此提取下了一部分公共的款式
body,figure,figcaption,h2,p{margin:0;padding:0;font-family: "微软雅黑";}
figure{position: relative;overflow: hidden;float: left;width:33.33%;height: 350px;}
figcaption{position: absolute;top: 0;left: 0;color:#fff;}
figure img{width:101%;height: 360px;opacity: 0.8;transition: all 0.35s}
figure figcaption p,h2,span,div{transition: all 0.35s}
@media screen and (max-width: 600px) {
figure{width: 100%;}
}
@media screen and (min-width:601px) and (max-width: 1000px) {
figure{width: 50%;}
}
@media screen and (min-width: 1001px) {
figure{width: 33.33%;}
}
总结：
之因此挑选写blog关键是以便锻练自身的表述工作能力，塑造1个总结专业知识点的好习惯性，之前看他人写的1些好的文章内容时都很羡慕嫉妒，自身却一直不知道道从何着手，直至近期投简历的情况下发现许多企业都规定注明自身的blog详细地址，因此必须逼着自身写1下物品啦！
以上便是本文的所有內容，期待对大伙儿的学习培训有一定的协助，也期待大伙儿多多适用脚本制作之家。