專注Java教育14年
全國咨詢/投訴熱線：400-8080-105
更新時間：2022-12-07 10:43:29 來源：動力節點 瀏覽1166次
通過 CSS transform 屬性，您可以使用以下 3D 轉換方法：
rotateX()
rotateY()
rotateZ()
#myDiv {
變換：旋轉X （150度）；
}
#myDiv {
變換：旋轉Y （150度）；
}
#myDiv {
變換：旋轉Z （150度）；
}
首先我們需要創建兩個文件 index.html 和 style.css 然后我們需要為它做代碼。
在 index.html 中添加以下代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>How to make 3D Rotating Image in CSS ?</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta https-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="box">
<span style="--i:1"> <img src="01.jpg"> </span>
<span style="--i:2"> <img src="02.jpg"> </span>
<span style="--i:3"> <img src="03.jpg"> </span>
<span style="--i:4"> <img src="04.jpg"> </span>
<span style="--i:5"> <img src="05.jpg"> </span>
<span style="--i:6"> <img src="06.jpg"> </span>
<span style="--i:7"> <img src="07.jpg"> </span>
<span style="--i:8"> <img src="08.jpg"> </span>
<span style="--i:9"> <img src="09.jpg"> </span>
</div>
</body>
</html>
然后我們需要為 style.css添加代碼， 我在下面的屏幕中提供了這些代碼。
* {
padding: 0;
margin: 0;
font-family: 'IBM Plex Sans', sans-serif;
}
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
background: #000;
}
.box {
position: relative;
width: 300px;
height: 150px;
transform-style: preserve-3d;
animation: animate 30s linear;
}
@keyframes animate {
0% {
transform: perspective(1000px) rotateY(0deg);
}
100% {
transform: perspective(1000px) rotateY(360deg);
}
}
.box > span {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform-origin: center;
transform-style: preserve-3d;
transform: rotateY(calc(var(--i) * 45deg)) translateZ(400px);
-webkit-box-reflect: below 0px linear-gradient(transparent, transparent, #0000001a);
}
.box > span > img {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
object-fit: contain;
}
Java實驗班
0基礎 0學費 15天面授
Java就業班
有基礎 直達就業
Java夜校直播班
業余時間 高薪轉行
Java在職加薪班
工作1~3年，加薪神器
Java架構師班
工作3~5年，晉升架構
提交申請后，顧問老師會電話與您溝通安排學習
官方微信
官方抖音
京公網安備 11030102010736號