CSS进阶

transform变形

transform用于对元素进行平移、旋转、缩放和倾斜。

属性：

• translate：平移
• rotate： 旋转
• scale：缩放
• skew：倾斜

translate

需要两个长度单位作为参数，表示将元素分别向右、向下移动指定长度。

.emoji{
transform:translate(100px,100px)
}

也可以使用translateX和translateY分别使用一个长度单位来控制元素沿X轴或Y轴平移。

.emoji{
transform:translateX(100px)
}

如果是使用百分数作为参数，则是相对于元素自身宽度的百分比去移动。

rotate

需要一个参数来指定元素顺时针旋转的角度，该值既可以是度数（deg）,也可以是圈数（turn）

元素旋转默认是围绕元素的中心点，使用transform-origin可以改变旋转中心。

.emoji{
transform-origin:0 0;
transform:rotate(-50deg)
}

scale

scale属性的参数是一个数值，表示元素缩放的倍数。如果一个参数则是整个元素缩放，如果是两个参数则是元素在X、Y两个方向的缩放倍数。也可以使用scaleX和scaleY来控制元素在不同方向的缩放。

transform-origin同时也适用于该属性，指定元素缩放的原点。

skew

使用skew属性可以设置元素的倾斜角度，参数是两个角度值，表示在X、Y两个方向的倾斜度。

也可以使用skewX和skewY来控制元素在不同方向的倾斜。

transform简写

以上所有属性均可以在transform里面声明，所以我们可以同时让一个元素有不同的变形。

注意：元素的变形是受坐标系影响的，所以不同的顺序可能会有不一样的变形。

3D变形

如果不设置3D变形效果，那我们看旋转时会感觉元素跟缩放没什么区别。设置3D变形后，我们可以更直观的看到元素的旋转。

使用perspective属性设置人眼距离屏幕的距离，距离越近，效果越明显。

使用translate3d属性设置元素在3D情景下的平移，需要三个长度单位，分别表示沿X、Y、Z轴平移。

.emoji{
transform:perspective(100px)；
translate3d(100px,100px,100px);
rotate(80deg)
}

transition过渡（之前整理过的）

CSS3-过渡_m0_57506941的博客-优快云博客

 Animation动画

使用animation属性可以实现更复杂的样式变化效果。

使用方法：

• 定义关键帧样式
• 应用动画到元素上

@keyframes dowm{
from(
margin-top:0;
opacity:1;
)
to(
margin-top:100px;
opacity:0.3;
)
}

 以上述代码为例，我们使用@keyframes来定义关键帧样式，之后紧跟着的"down"是样式名，我们可以自定义样式名，在之后应用时会用到。

然后我们定义了两个关键帧样式，分别表示开始与结束时。

使用animation属性来为元素应用动画

• animation-name：使用关键帧的名字
• animation-duration：动画持续的时间
• animation-timing-function：表示关键帧之间过渡的快慢
• animation-delay：表示动画播放的延迟
• animation-iteration-count：表示动画重复次数
• animation-direction：表示动画播放方向（正向，逆向）

了解浏览器支持情况

在开发过程中，我们常常要考虑各样水是否兼容各主流浏览器的情况，以下网站则可以帮助我们知道使用的样式在哪些浏览器中兼容，哪些不兼容。（如下图所示）

• caniuse.com
• MDN CSS Reference
• Codrops CSS Reference
• QuirksMode.org CSS