首頁 > 文章 > web前端 > 使用 CSS3 3D 變換函數

使用 CSS3 3D 變換函數

王林轉載: 2023-09-16 14:33:07911瀏覽

使用 3d 變換，我們可以將元素移到 x 軸、y 軸和 z 軸。以下是CSS3 3D 變換的一些方法-

以下方法用於調用3D 變換-

##2translate3d(x,y,z)##3#4#5以下是CSS3 3D 變換函數的程式碼-

Sr.No.	值和描述
1	matrix3d(n,n, n,n,n,n,n,n,n,n,n, n,n,n,n,n) 用於使用矩陣的16 個值來轉換元素
	用於使用x軸變換元素,y軸與z軸
translateX(x)	用於使用x 軸變換元素
#translateY(y)	用於使用y 軸變換元素
translateZ(z)	用於使用y 軸變換元素

範例

現場演示

<!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 變換函數的詳細內容。更多資訊請關注PHP中文網其他相關文章！

css3

陳述：

本文轉載於：tutorialspoint.com。如有侵權，請聯絡admin@php.cn刪除

上一篇：什麼是 CSS 偽類下一篇：什麼是 CSS 偽類

看更多