css手势样式

/* 手势样式的CSS代码示例 */

/* 1. 触摸旋转 */
.touch-rotate {
    transform: rotate(45deg);
    transition: transform 0.3s ease;
}

.touch-rotate.active {
    transform: rotate(90deg);
}

/* 解释：当元素被激活时（例如通过触摸或点击），它会从45度旋转到90度。 */

/* 2. 触摸缩放 */
.touch-zoom {
    transform: scale(1);
    transition: transform 0.3s ease;
}

.touch-zoom.active {
    transform: scale(1.5);
}

/* 解释：当元素被激活时，它会从原始大小缩放到1.5倍。 */

/* 3. 触摸平移 */
.touch-move {
    transform: translateX(0);
    transition: transform 0.3s ease;
}

.touch-move.active {
    transform: translateX(100px);
}

/* 解释：当元素被激活时，它会从初始位置沿X轴移动100px。 */

/* 4. 多点触控手势 */
@media (pointer: fine) {
    .pinch-zoom {
        touch-action: pinch-zoom;
    }
}

/* 解释：在支持多点触控的设备上，允许用户通过捏合手势进行缩放。 */

以上代码展示了如何使用CSS实现一些基本的手势效果，如旋转、缩放和平移。这些效果可以通过类名 .active 来触发，通常结合JavaScript来检测手势事件并添加或移除该类。