CSS二合一课程: 过渡与变形
本帖最后由 马黑黑 于 2021-12-27 12:25 编辑之前我们介绍了CSS3的 @keyframes 动画，先来简单复习一下：
首先，需要构建一个动画过程，@keyframes+名称，如，@keyframes iChg，接着用 from ... to ... 或百分比来设定变化过程，然后在需要显示动画的选择器样式表代码中用 animation 引用变化并设定时长等属性 ，语句为动画名称+时长+其他属性，如 animation:iChg 2s infinite alternate（后两个属性表示循环变化、反方向变化）。最后在HTML代码中调用CSS选择器。看下面简单例子，以便更好地理解巩固：
<style type="text/css">
@keyframes iChg {
from { background:#fff; }
to { background:#000; }
/* 亦可用百分比来描述变化过程
%0 { background:#fff; }
100% { background:#000 }
*/
}
.myDiv {
margin:4px auto;
width:200px;
height:200px;
background:#fff;
border: 4px dashed #ffcccc;
animation:iChg 2s infinite alternate; /* 指定动画及变化时长、属性*/
}
</style>
<div class="myDiv"></div> <!-- HTML代码用 class方式引用CSS中myDiv类选择器 -->接下来，简单学习CSS另外两个能产生动画效果的属性函数：变形（transform）和过渡（transition），这两个属性函数的基本应用也相对简单。
一、CSS变形 transform
transform的意思是变形、转换等，它提供很多方法参数，常用的有 rotate（旋转）、scale（扭曲）、translate（移动）、matrix（矩阵变形）。作为入门，本帖仅简单讨论旋转 rotate 和 translate 方法。
（一）旋转方法（rotate）
语法：transform:rotate(角度)
解释：首先告诉CSS我要变形，即 transform: ，然后指定变形方式为旋转，即 rotate(角度)，角度从 0 到 360 之间取值，支持负数值，单位为 deg ，看下面例子——
transform:rotate(45deg);上例是CSS语句，可以用 style 方式直接在HTML代码中使用：
<img alt="" src="图片" style="transform:rotate(-45deg);" />这样发出的图片将逆时针旋转45度。
（二）二维移动方法（translate）
语法：transform:tranlate(x,y)
解释：translate表示移动（二维），参数 x 是横坐标移动矢量值，y 表示纵坐标移动矢量值（y可以省略，缺省值为0）。
例子：transform:translate(300px,0px);
上面例子中，只设置了横向移动值，也可以用 translateX 方法：translateX(300px)；同样的，如果只需要纵向移动，可用 translateY 方法：translateY(100px)。
translate方法令被修饰对象产生移动，即对象会从原来的位置A移动到预设的位置B，但是，移动的过程无法看到，我们看到的只是结果。和 rotate 方法一样，要令其产生动画效果，需要触发机制。
当 transform 需要指定多个变形效果时，用空格将两个方法隔开而不是逗号，这个规范较为特殊：
transform:rotate(30deg) translateX(200px);
二、CSS过渡（transition）
transition是过渡变化，它指定某个HTML对象（如图片）从样式A过渡到样式B，可通过伪类触发变化过程。
简单语法：transition:属性 时长
解释：“属性”参数值得是HTML对象的 width、height、color、border等属性，还可以是CSS变化属性（上面讨论的变形 transform 等；时长指一个周期变化的用时。
例子：
transition:height 2s;这将定义出这样一个过渡变化：改变对象高度，2秒内完成。如果需要加入其他属性的变化（如宽度），用逗号隔开：
transition:height 2s,width:2s;要触发过渡变化，需要在CSS中定义一个类选择器的伪类选择器：
<style type="text/css">
/* 自定义类选择器 */
.iDiv {
width:100px; /* 原始宽度 */
height:80px; /* 原始高度 */
background:#bbb;
transition:linear width 2s,height 2s; /* 长宽两个过渡变化 */
/* linear表示匀速变化，省略时缺省值为 ease */
}
/* 伪类选择器 类选择器名称:hover */
.iDiv:hover {
width:800px; /* 变化的终极宽度 */
height:200px; /* 变化的终极高度 */
}
</style>最后写HTML标签代码：
<div class="iDiv"></div>
本帖的内容有点多，但只讨论了最简单也最基本的 transform 和 transition 的用法，它们还有很多复杂的参数留待以后需要时再逐一了解、学习。
本帖最后由 马黑黑 于 2021-12-27 12:36 编辑 <br /><br /><p> transform 变形的 rotate 旋转效果：<br> </p>
<p style="text-align:center" ;="">
<img src="https://www.huachaowang.com/uc_server/data/avatar/000/00/67/66_avatar_middle.jpg" alt="" style="transform:rotate(-30deg);">
<img src="https://www.huachaowang.com/uc_server/data/avatar/000/00/67/66_avatar_middle.jpg" alt="" style="transform:rotate(30deg);">
</p>
<p style="text-align:center" ;="">
<img src="https://www.huachaowang.com/uc_server/data/avatar/000/00/67/66_avatar_middle.jpg" alt="" style="transform:rotate(-120deg);">
<img src="https://www.huachaowang.com/uc_server/data/avatar/000/00/67/66_avatar_middle.jpg" alt="" style="transform:rotate(120deg);">
</p>
<style type="text/css">
/* 自定义类选择器 */
.iDiv {
width:100px; /* 原始宽度 */
height:80px; /* 原始高度 */
background:#bbb;
transition:linear width 2s,height 2s; /* 长宽两个过渡变化 */
/* linear表示匀速变化，省略时缺省值为 ease */
}
/* 伪类选择器 类选择器名称:hover */
.iDiv:hover {
width:800px; /* 变化的终极宽度 */
height:200px; /* 变化的终极高度 */
}
</style>
<p>鼠标指针移到下框查看 transition 过渡变化效果：<br /></p>
<div class="iDiv"></div> 三楼的效果是多个 rotate 组合而成，可以通过更改 deg 值、添加更多的图片或其他方式来生成更多的效果。参考代码：
<p> transform 变形的 rotate 旋转效果：<br> </p>
<p style="text-align:center" ;="">
<img src="https://www.huachaowang.com/uc_server/data/avatar/000/00/67/66_avatar_middle.jpg" alt="" style="transform:rotate(-30deg);">
<img src="https://www.huachaowang.com/uc_server/data/avatar/000/00/67/66_avatar_middle.jpg" alt="" style="transform:rotate(30deg);">
</p>
<p style="text-align:center" ;="">
<img src="https://www.huachaowang.com/uc_server/data/avatar/000/00/67/66_avatar_middle.jpg" alt="" style="transform:rotate(-120deg);">
<img src="https://www.huachaowang.com/uc_server/data/avatar/000/00/67/66_avatar_middle.jpg" alt="" style="transform:rotate(120deg);">
</p>
谢谢老黑的教程。讲得很详细。{:4_190:} 加林森 发表于 2021-12-27 13:11
谢谢老黑的教程。讲得很详细。
{:4_180:} 马黑黑 发表于 2021-12-27 13:31
老黑下午好！ 加林森 发表于 2021-12-27 13:35
老黑下午好！
不午休么 用这些功能，可以直接操控图形变化了，这个有意思。又可以一个个试着玩了{:4_187:} 黑黑辛苦了，感谢你带来这么多好玩的{:4_199:} 红影 发表于 2021-12-27 14:46
用这些功能，可以直接操控图形变化了，这个有意思。又可以一个个试着玩了
CSS动画入门知识。活用才是重要的。 马黑黑 发表于 2021-12-27 23:36
CSS动画入门知识。活用才是重要的。
伪类选择器就是需要鼠标等去触发的吧？ 马黑黑 发表于 2021-12-27 12:41
三楼的效果是多个 rotate 组合而成，可以通过更改 deg 值、添加更多的图片或其他方式来生成更多的效果。参 ...
这个代码中，看到另两个角度时，你又定义了一遍<p style="text-align:center" ;="">
可以不可以不定义，一路输入角度进去？ 红影 发表于 2021-12-28 10:39
这个代码中，看到另两个角度时，你又定义了一遍
可以不可以不定义，一路输入角度进去？
我用一个 div 装载图片，令图片居中 红影 发表于 2021-12-28 10:34
伪类选择器就是需要鼠标等去触发的吧？
是的 不是有点多，是太多了 绿叶清舟 发表于 2021-12-28 12:53
不是有点多，是太多了
已经很简单了：前面是复习，后面是两个知识点 马黑黑 发表于 2021-12-28 12:45
我用一个 div 装载图片，令图片居中
嗯，很神奇，图片可以相叠，围绕同样的圆心。 马黑黑 发表于 2021-12-28 12:45
是的
前面的那个更好看，很直接看到效果，后面的这个第一个也能直接看到效果，后一个触发的虽然有趣，但总想不起去用鼠标去划拉呀{:4_173:} 本帖最后由 加林森 于 2021-12-28 17:46 编辑 <br /><br />
<p style="text-align:center" ;="">
<img src="https://www.huachaowang.com/uc_server/data/avatar/000/00/71/87_avatar_middle.jpg" alt="" style="transform:rotate(-30deg);">
<img src="https://www.huachaowang.com/uc_server/data/avatar/000/00/71/87_avatar_middle.jpg" alt="" style="transform:rotate(30deg);">
</p>
<p style="text-align:center" ;="">
<img src="https://www.huachaowang.com/uc_server/data/avatar/000/00/71/87_avatar_middle.jpg" alt="" style="transform:rotate(-120deg);">
<img src="https://www.huachaowang.com/uc_server/data/avatar/000/00/71/87_avatar_middle.jpg" alt="" style="transform:rotate(120deg);">
</p>