3D转换transform-style
- 控制子元素是否开启三维立体环境
- transform-style:flat 子元素不开启3D立体空间 默认的
- transform-style:perserve-3d 子元素开启立体空间
- 代码写给父级，但是影响的是子盒子
- 这个属性和重要，写3D的时候会用到
实现如下效果
思路：两个盒子，相对于父元素进行定位。然后蓝色盒子根据x轴进行旋转，要对父元素加上transform-style:perserve-3d 的属性。
<!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>
body {
perspective: 500px;
}
.box {
width: 200px;
height: 200px;
margin: 100px auto;
position: relative;
/* 让子元素开启三维立体环境 */
transform-style: preserve-3d;
}
.box div {
position: absolute;
top: 0;
left: 0;
/* 和父元素的大小一样 */
width: 100%;
height: 100%;
background-color: pink;
}
/* 最后一个盒子沿x轴旋转 */
.box div:last-child {
background-color: blue;
transform: rotateX(76deg);
}
.box:hover {
transform: rotateY(80deg);
transition: all 1s;
}
</style>
</head>
<body>
<div class="box">
<div></div>
<div></div>
</div>
</body>
</html>
