开启3D视角(设置视距 perspertive )
perspertive: ?px; /*透视距离*/
该属性需要设置在元素的父元素上
3d移动 translate3d
transform:translate3d(x,y,z) 其中 x y z 分别指要移动的轴的方向的距离
translform:translateX(100px) 仅仅是移动,在x轴上移动,正值增大从左往右
translform:translateY(100px) 仅仅是移动,在Y轴上移动,正值增大从上到下
translform:translateZ(100px) 仅仅是移动,在Z轴上移动,正值增大从里向外
translform:translateX(100px) translateY(100px) translateZ(100px);
3d旋转 rotate3d
transform:rotate3d(x,y,z)
transform: rotateX(90deg); 正值下发突出
transform: rotateY(90deg); 正值左侧突出
transform: rotateZ(90deg); 正值顺时针旋转
3D呈现
transform-style可以控制子元素是否开启三维立体环境(该样式写在父级,影响子元素)
transform-style:flat; 子元素不开启3D立体空间(默认)
transform-style:preserve-3d; 子元素开启立体空间
隐藏背面
backface-visibility: hidden
作用于父元素,翻转后隐藏背面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
perspective: 1000px;
}
div{
width: 500px;
height: 500px;
}
.box{
position: relative;
transform-style: preserve-3d;
/* 与transform-style: preserve-3d;一样,设置于父元素,翻转后将子元素中本应被遮盖的元素隐藏掉,相当于暂时隐藏掉子元素中其中一个元素 */
backface-visibility: hidden;
transition: all 3s;
}
div[class^='sonbox']{
line-height: 500px;
text-align: center;
font-size: 100px;
font-weight: bold;
color: white;
border-radius: 50%;
}
.sonbox1{
position: absolute;
/* 可以把position比作一个层面,厚度为一张纸,无论sonbox1还是sonbox2,都拘泥于同一张纸上,只是显示的优先级不同*/
z-index: 5;
background-color: aqua;
}
.sonbox2{
position: absolute;
z-index: 1;
background-color: orange;
transform: rotateY(180deg);
}
.box:hover{
transform: rotateY(180deg);
}
</style>
</head>
<body>
<div class="box">
<div class="sonbox1">这是正面</div>
<div class="sonbox2">这是反面</div>
</div>
</body>
</html>
设置过backface-visibility后的结果
没有设置backface-visibility的结果