先來兩個羞羞的網站
http://tridiv.com/ , 這是一個css 在線做3D的一個網站
https://720yun.com/ , 純css vr3D視角的一個東西
製作html 純css3D
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#box div{
position: absolute;
height: 160px;
width: 160px;
border: 1px solid #000;;
background: rgba(255,200,100,0.8);
text-align: center;
font-size: 130px;
}
#box {
-webkit-transform-style: preserve-3d; /* 開啓css3d模式*/
/* transform: perspective(120px); */
transform-origin: 80px 80px;
animation: animationdemo ease-in-out 5s infinite;
}
#box .one {
transform: translateZ(80px);
}
#box .two {
transform: rotateX(-90deg) translateZ(80px)
}
#box .three {
transform: rotateX(90deg) rotateZ(90deg) translateZ(80px);
}
#box .four {
transform: rotateY(180deg) rotateZ(90deg) translateZ(80px);
}
#box .five {
transform: rotateY(-90deg) translateZ(80px)
}
#box .six {
transform: rotateY(90deg) rotateZ(90deg) translateZ(80px);
}
@keyframes animationdemo {
0% { -webkit-transform: rotateY(0deg) rotateZ(0deg);}
33%{
-webkit-transform: rotateY(33deg) rotateZ(33deg);
}
66%{
-webkit-transform: rotateY(-66deg) rotateZ(66deg);
}
100%{
-webkit-transform: rotateY(-100deg) rotateZ(100deg);
}
}
</style>
</head>
<body>
<div id="view" style="width: 160px;height: 160px;margin: 80px auto 0 auto">
<div id="box">
<div class="one">A</div>
<div class="two">B</div>
<div class="three">C</div>
<div class="four">D</div>
<div class="five">E</div>
<div class="six">F</div>
</div>
</div>
</body>
</html>
image.png
一個簡單的正方體就完成啦
0人點贊