css3 模拟场景转换

CSS3模拟场景转换越来越流行，它运用了很多CSS3效果，让网页看起来更加生动。下面我们来介绍一些CSS3模拟场景转换的代码。

/*第一个场景转换效果*/
.Box {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    transition: all 0.5s ease-out;
    perspective: 800px;
    transform-style: preserve-3d;
}

.Box:active {
    transform: rotateX(70deg);
}

/*第二个场景转换效果*/
.Box2 {
    position: relative;
    width: 240px;
    height: 240px;
    margin: 60px auto;
    transform-style: preserve-3d;
    transition: all 0.5s ease-out;
}

.Box2:hover {
    transform: rotateY(-120deg) rotateX(60deg) scale(1.2);
}

/*第三个场景转换效果*/
.Box3 {
    width: 240px;
    height: 240px;
    margin: 60px auto;
    perspective: 800px;
    transform-style: preserve-3d;
    transition: all 0.5s ease-out;
}

.Box3:hover .card {
    transform: rotateY(-180deg);
}

.Box3 .card {
    width: 100%;
    height: 100%;
    position: absolute;
    backface-visibility: hidden;
    transform-style: preserve-3d;
    transition: all 0.5s ease-out;
}

.Box3 .front {
    background-color: #7fdbFF;
    transform: rotateY(0deg);
}

.Box3 .back {
    background-color: #FF4136;
    transform: rotateY(-180deg);
}

以上就是几个比较流行的CSS3模拟场景转换的代码，它们通过使用transform和transition这两个CSS3特性，实现了各种有趣生动的场景转换效果。