3D轉換transform-style
阿新 • • 發佈：2022-03-24
- 控制子元素是否開啟三維立體環境
- 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>