使用 3d 變換，我們可以將元素移動到 x 軸、y 軸和 z 軸。以下是 CSS3 3D 變換的一些方法 –
以下方法用于調用 3D 變換 –
| Sr.No. | 值和描述 |
|---|---|
| 1 | matrix3d(n,n, n,n,n,n,n,n,n,n,n,n,n,n,n,n)
用于使用矩陣的 16 個值來變換元素 |
| 2 | translate3d(x,y,z)
用于使用x軸變換元素,y軸和z軸 |
| 3 | translateX(x)
用于使用 x 軸變換元素 |
| 4 | translateY(y)
用于使用 y 軸變換元素 |
| 5 | translateZ(z)
用于使用 y 軸變換元素 |
以下是 CSS3 3D 變換函數的代碼 –
示例
?現場演示
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.container {
display: inline-block;
width: 200px;
height: 200px;
border: 1px solid #CCC;
margin-left: 20px;
}
.rotateX {
width: 100%;
height: 100%;
background: rgb(52, 0, 241);
transform: perspective(600px) rotateX(85deg);
}
.rotateY {
width: 100%;
height: 100%;
background: rgb(55, 0, 255);
transform: perspective(600px) rotateY(75deg);
}
.translateZ{
width: 100%;
height: 100%;
background: rgb(55, 0, 255);
transform: perspective(600px) translateZ(-200px);
}
</style>
</head>
<body>
<h1>3D transform function example</h1>
<div class="container">
<div class="rotateX"></div>
</div>
<div class="container">
<div class="rotateY"></div>
</div>
<div class="container">
<div class="translateZ"></div>
</div>
</body>
</html>
登錄后復制
輸出
上面的代碼將產生以下輸出 –
以上就是使用 CSS3 3D 變換函數的詳細內容，更多請關注www.92cms.cn其它相關文章！
