【Web前端开发基础】CSS3之空间转换和动画

/* 定义一个简单的动画，使元素旋转 */
@keyframes rotateAnimation {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
 
/* 应用动画到具有class .rotate-me 的元素上 */
.rotate-me {
    animation-name: rotateAnimation;
    animation-duration: 2s; /* 动画持续时间 */
    animation-iteration-count: infinite; /* 动画无限次数播放 */
    animation-timing-function: linear; /* 动画速度曲线 */
}
 
/* 应用3D空间转换的例子 */
.flip-card {
    perspective: 1000px; /* 创建3D空间 */
}
 
.flip-card-inner {
    transition: transform 0.6s;
    transform-style: preserve-3d;
}
 
.flip-card-front, .flip-card-back {
    backface-visibility: hidden; /* 隐藏翻转的背面 */
    position: absolute;
    width: 100%;
    height: 100%;
}
 
/* 鼠标悬停时翻转卡片 */
.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
}

这个例子展示了如何使用CSS3的@keyframes来创建一个简单的旋转动画，并且如何使用transform和transition属性来进行空间转换和过渡效果的制作。同时，它也展示了如何使用.flip-card和.flip-card-inner类来创建一个可以在鼠标悬停时翻转的卡片效果。