transform 小技巧
实现3D效果
1.父级开启3D视角
transform-style:preserve-3d
perspective:2000px //定义 3D 转换元素的透视视图
tansform:perspective(2000px)
2.rotate
rotate3d(x,y,z,angle) //3D
//2D
rotateX(angle) 沿x轴旋转
rotateY(angle) 沿y轴旋转
rotateZ(angle) 沿z轴旋转
3.translate
translate3d(x,y,z) //3D
同上
4.scale
scale3d(x,y,z) //3D
同上
5.skew //2D
skew(x-angle,y-angle)
skewX(angle)
skewY(angle)
6.
backface-visibility:visible/hidden //隐藏背面
tansform-origin:left/px/% center/px/% //旋转中心
7.domo(翻牌效果)
/*css*/
<style>
body{
perspective: 800px;
}
.box{
width:300px;
height:400px;
position: relative;
margin:100px auto;
transform-style:preserve-3d;
transition:2s;
}
.front,.back{
width:300px;
height:400px;
position: absolute;
left:0;
top:0;
font-size:50px;
line-height: 400px;
text-align: center;
background:pink;
}
.front{
z-index:100;
backface-visibility: hidden;
}
.back{
transform: scale(-1,1);
}
.box:active{
transform: rotateY(180deg);
}
</style>
<!--html-->
<body>
<div class="box">
<div class="front">前</div>
<div class="back">后</div>
</div>
<body>
