深入解析：重学前端015 --- 响应式网页设计 CSS变换

文章目录

• skew()
• transform
• cursor
• transition
• .arm .left {} 和 .arm.left {} 区别

skew()

skew 倾斜变换函数，该函数有两个参数。第一个是剪切x轴的角度，第二个是剪切y轴的角度。

transform: skew(0deg, 44deg);

transform

.arm.left {
top: 35%;
left: 5%;
transform-origin: top left;
/* 基准点 */
transform: rotate(130deg) scaleX(-1);
/* 旋转 */
}

position: absolute;
z-index: 1;
transform: rotate(45deg);
left: 110px;
top: 225px;

cursor

.penguin:active {
transform: scale(1.5);
cursor: not-allowed;
/* 禁止操作 */
}

transition

.penguin {
width: 300px;
height: 300px;
margin: auto;
margin-top: 75px;
z-index: 4;
position: relative;
transition-timing-function: ease-in-out;
transition-duration: 1s;
transition-delay: 0ms;

属性	定义	主要用途
​​transform	定义元素的具体变换效果（旋转、缩放、倾斜等）	实现元素的变形
​​transform-origin​​	定义 transform变换的基准点位置	控制变换发生的中心点
​​transition​​	定义 CSS 属性变化时的过渡效果	实现平滑的动画过渡
​​animation​​	定义更复杂的动画序列	控制关键帧动画

.arm .left {} 和 .arm.left {} 区别

在 CSS 中，.arm .left和 .arm.left这两个选择器的含义和作用的范围有本质区别。

特性	.arm .left(带空格)	.arm.left(无空格)
​​名称​​	后代选择器 (Descendant Selector)	多类选择器/并列选择器 (Multi-class Selector)
​​含义​​	选择​​所有​​在 class 为 arm的​​元素内部​​的 class 为 left的元素	选择​​同时拥有​​ arm​​和​​ left这两个 class 的​​同一个元素​​
​​层级关系​​	有层级关系（祖先与后代）	无层级关系（作用于同一个元素）
​​HTML 结构示例​​	<div class=“arm”><div class=“left”></div></div>	<div class=“arm left”></div>

详细说明与示例

1. .arm .left(后代选择器)
   这个选择器中间有一个​​空格​​。空格在 CSS 选择器中表示​​层级关系​​（祖先与后代）。它会匹配所有​​作为 class="arm"的元素的后代元素​​中，那些 class="left"的元素。

2. .arm.left(多类选择器)
   这个选择器中间​​没有空格​​。它用于选择​​同时具有​​ arm和 left这两个类的​​同一个 HTML 元素​​。类的顺序在 HTML 的 class属性中不重要，只要该元素同时拥有这两个类即可。

简单记忆方法
​​空格表示“在……里面”​​：.arm .left表示“​​在​​ arm​​里面​​的 left元素”。
​​无空格表示“和”​​：.arm.left表示“既是 arm​​又是​​ left的元素”。