CSS3的景深和transform属性
⼀、transform是什么
transform 属性向元素应⽤ 2D 或 3D 转换。该属性允许我们对元素进⾏旋转、缩放、移动或倾斜。主要是CSS3的内容，在运⽤之前需要加上transform-style 属性，它能规定如何在 3D 空间中呈现被嵌套的元素，属性值preserve-3d：⼦元素将保留其 3D 位置
flat：⼦元素将不保留其 3D 位置。
⼆、transform 属性值
rotateX(数字deg) 定义沿着 X 轴的 3D 旋转。（X、Y、Z的意思和⽤法相同）
translateX(数字px) 定义 3D 转换，只是⽤ X轴的值。（X、Y、Z的意思和⽤法相同）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D盒⼦</title>
<style>
*{
padding:0;
margin:0;
}
.box{
position:relative;
width:300px;
height:300px;
border:2px solid black;
margin:80px auto;
perspective: 800px;/* 景深 */
transform-style: preserve-3d;/* 让我的元素成3D在舞台上呈现 */
}
.item1{
position:absolute;
font-size:36px;
font-weight:600px;
width:100%;
height:100%;
background:rgba(178, 241, 5, 0.473);
transform:rotateY(0deg)translateZ(0px);
}
.item2{
position:absolute;
font-size:36px;
width:100%;
height:100%;
background:rgb(238, 60, 208);
transform:rotateX(180deg)translateZ(150px);
}
.item3{
position:absolute;
font-size:36px;
width:100%;
height:100%;
background:rgba(235, 8, 19, 0.5);
transform:rotateY(90deg)translateZ(150px);
}
.item4{
position:absolute;
font-size:36px;
width:100%;
height:100%;
background:rgba(231, 235, 12, 0.5);
transform:rotateY(-90deg)translateZ(150px);
transform:rotateY(-90deg)translateZ(150px);
}
.item5{
position:absolute;
font-size:36px;
width:100%;
height:100%;
background:rgba(74, 31, 192, 0.5);
transform:rotateX(90deg)translateZ(150px);
}
.item6{
position:absolute;
font-size:36px;
rotate属性width:100%;
height:100%;
background:rgba(30, 177, 245, 0.5);
transform:rotateX(-90deg)translateZ(150px);
}
</style>
</head>
<body>
<div class="box">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
<div class="item6">6</div>
</div>
</body>
</html>
效果图
总结：我们在制作类似这种3D效果的物品时，最好⾃⼰先画图，然后⼀个⼀个⾯去尝试调整⾓度，确定旋转的⽅向和⾓度。
三、景深
1、定义：沿光轴纵⽅向被摄主体前后可以接受的清晰范围。
**2、影响景深的重要因素：**光圈、镜头、及焦平⾯到拍摄物的距离
①光圈越⼤（光圈值f越⼩）景深越浅，光圈越⼩（光圈值f越⼤）景深越深。
②镜头焦距越长景深越浅、反之景深越深。
③主体越近，景深越浅，主体越远，景深越深。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。