凯哥学堂

声明：本栏目所使用的素材都是凯哥学堂VIP学员所写，学员有权匿名，对文章有最终解释权；凯哥学堂旨在促进VIP学员互相学习的基础上公开笔记。

样式效果：

2D转换：

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
其中rotate属性是用来定义2D旋转的，属性参数里面填写的是旋转的角度。
图片旋转代码示例：

运行结果：

scale(x,y) 设置2D缩放，scale(x) 则仅通过设置x轴的值来定义缩放转换，代码示例：

运行结果：

skew(x-angle,y-angle) 定义沿着X和Y轴的2D倾斜转换，单位是角度deg，代码示例：

运行结果：

思维导图：

其他的属性使用方式参考：

过渡属性：
transition 属性是一个用于设置过渡效果的属性，可以设置2D转换的过渡、宽高变化的过渡、背景或字体颜色的过渡。

这个属性要配合hover使用，当鼠标移动到改该定义的元素时就会出现过渡效果，2D缩放过渡效果代码示例：

运行结果：

宽度和背景颜色过渡，代码示例：

其实逻辑很简单，就是先在标签样式里先定义好初始的样式效果和要过渡的属性和时间，然后在标签的hover状态样式里定义鼠标移动上去后的样式效果，过渡其实就是把这个改变样式效果的过程变缓慢了。

运行结果：

2D旋转过渡代码示例：

运行结果：

以上只是介绍到transition属性规定完成过渡效果需要多少秒或毫秒的操作，剩下还有几个效果可以参考以下语法，或访问w3cshool网站查询更多的用法。

网址：http://www.w3school.com.cn/cssref/pr_transition.asp

div层的制作：

先介绍几个属性：
position属性，用于规定元素的定位类型。

position属性的absolute值用于生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
其实简单来说就是通过绝对定位，元素可以放置到页面上的任意位置，例如div，我给div设置了绝对定位就可以任意的通过"left", "top", "right" 以及 "bottom" 属性设置它在网页中的位置。
代码示例：

运行结果：

z-index属性，定义div层的序号，例如：z-index属性值为2的层，那么这个层就在z-index属性值为1的层上面。
代码示例：

运行结果：

结合以上介绍的知识点，我们可以做一个简单的例题，例如：当我们有时候登录某个网站的账户时，会发现当登录的输入框弹出来的时候除了登录的输入框之外就不能点击网页的其他地方了，这其实就是使用了div层的效果，把网页都给盖住了。而且有些登录的输入框当我们把鼠标移动上去后还会有旋转放大之类的效果，这是使用到了过渡样式。现在我们做一个类似于这样子的网页。
代码示例：

运行结果：