css鼠标移动翻转,CSS3 鼠标悬停侧向翻转的3D面板

CSS

语言：

CSSSCSS

确定

.container {

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-flex-flow: row nowrap;

-ms-flex-flow: row nowrap;

flex-flow: row nowrap;

-webkit-box-pack: center;

-webkit-justify-content: center;

-ms-flex-pack: center;

justify-content: center;

-webkit-perspective: 1000px;

perspective: 1000px;

position: absolute;

top: 50%;

-webkit-transform: translateY(-50%);

-ms-transform: translateY(-50%);

transform: translateY(-50%);

}

.panel {

width: 10vw;

height: 50vh;

-webkit-transition: all 0.5s ease-out;

transition: all 0.5s ease-out;

background: tomato;

}

.panel:nth-child(1) {

-webkit-transform: rotateY(90deg);

transform: rotateY(90deg);

}

.panel:nth-child(2) {

-webkit-transform: rotateY(90deg);

transform: rotateY(90deg);

}

.panel:nth-child(3) {

-webkit-transform: rotateY(90deg);

transform: rotateY(90deg);

}

.panel:nth-child(4) {

-webkit-transform: rotateY(90deg);

transform: rotateY(90deg);

}

.panel:nth-child(5) {

-webkit-transform: rotateY(90deg);

transform: rotateY(90deg);

}

.panel:nth-child(6) {

-webkit-transform: rotateY(-90deg);

transform: rotateY(-90deg);

}

.panel:nth-child(7) {

-webkit-transform: rotateY(-90deg);

transform: rotateY(-90deg);

}

.panel:nth-child(8) {

-webkit-transform: rotateY(-90deg);

transform: rotateY(-90deg);

}

.panel:nth-child(9) {

-webkit-transform: rotateY(-90deg);

transform: rotateY(-90deg);

}

.panel:nth-child(10) {

-webkit-transform: rotateY(-90deg);

transform: rotateY(-90deg);

}

.panel:hover {

-webkit-transform: none;

-ms-transform: none;

transform: none;

-webkit-box-flex: 3;

-webkit-flex-grow: 3;

-ms-flex-positive: 3;

flex-grow: 3;

-webkit-transition: all 0.5s ease-out;

transition: all 0.5s ease-out;

background: #fff;

}

body {

background: #f4f0e5;

}