代码:
html
<div class="flipper">
<span class="flipper-object flipper-vertical">
<span class="panel front">The Front</span>
<span class="panel back">The Back</span>
</span>
</div>
style:
.flipper {
height: 100px;
width: 100px;
margin:0 auto;
perspective: 400px; //父元素设置视距,越大3d效果越不明显
position: relative; //这里给子元素做定位参考
}
.flipper-object {
position: absolute;
transition: transform 1s;
transform-style: preserve-3d; // 这个一定要设置
}
.panel {
top:0;
position: absolute;
backface-visibility: hidden; //背面隐藏
}
.flipper-vertical .back { //下面这四个类决定是上下翻转,还是左右翻转
transform: rotateX(180deg)
}
.filter-horizontal .back {
transform: rotateY(180deg)
}
.flipper:hover .flipper-vertical {
transform: rotateX(180deg)
}
.flipper:hover .flipper-horizontal {
transform: rotateX(180deg)
}
完整代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>transform3D变换</title>
<style>
.flipper {
height: 100px;
width: 100px;
margin:0 auto;
perspective: 400px;
position: relative;
}
.flipper-object {
position: absolute;
transition: transform 1s;
transform-style: preserve-3d;
}
.panel {
top:0;
position: absolute;
backface-visibility: hidden;
}
.flipper-vertical .back {
transform: rotateX(180deg)
}
.filter-horizontal .back {
transform: rotateY(180deg)
}
.flipper:hover .flipper-vertical {
transform: rotateX(180deg)
}
.flipper:hover .flipper-horizontal {
transform: rotateX(180deg)
}
</style>
</head>
<body>
<div class="flipper">
<span class="flipper-object flipper-vertical">
<span class="panel front">The Front</span>
<span class="panel back">The Back</span>
</span>
</div>
</body>
</html>