CSS

語言：

CSSSCSS

確定

body {

background: #222;

width: 100vw;

height: 100vh;

overflow: hidden;

-webkit-filter: blur(1px);

filter: blur(1px);

box-sizing: border-box;

-webkit-perspective: 3000px;

perspective: 3000px;

}

.cube {

position: absolute;

width: 250px;

height: 250px;

top: 50%;

left: 50%;

margin: -125px -125px;

-webkit-transform-style: preserve-3d;

transform-style: preserve-3d;

-webkit-transform: rotateX(-30deg) rotateY(45deg);

transform: rotateX(-30deg) rotateY(45deg);

-webkit-animation: rotation 30s linear infinite;

animation: rotation 30s linear infinite;

}

.cube div,

.cube canvas {

width: 246px;

height: 246px;

position: absolute;

border: 2px solid white;

background: #000;

}

.cube .left {

-webkit-transform: rotateY(-90deg) translateZ(125px);

transform: rotateY(-90deg) translateZ(125px);

}

.cube .right {

-webkit-transform: rotateY(90deg) translateZ(125px);

transform: rotateY(90deg) translateZ(125px);

}

.cube .back {

-webkit-transform: rotateY(180deg) translateZ(125px);

transform: rotateY(180deg) translateZ(125px);

}

.cube .front {

-webkit-transform: rotateX(0deg) translateZ(125px);

transform: rotateX(0deg) translateZ(125px);

}

.cube .top {

-webkit-transform: rotateX(90deg) translateZ(125px);

transform: rotateX(90deg) translateZ(125px);

}

.cube .bottom {

-webkit-transform: rotateX(-90deg) translateZ(125px);

transform: rotateX(-90deg) translateZ(125px);

}

@-webkit-keyframes rotation {

0% {

-webkit-transform: rotateX(-30deg) rotateY(45deg);

transform: rotateX(-30deg) rotateY(45deg);

}

100% {

-webkit-transform: rotateX(330deg) rotateY(405deg);

transform: rotateX(330deg) rotateY(405deg);

}

}

@keyframes rotation {

0% {

-webkit-transform: rotateX(-30deg) rotateY(45deg);

transform: rotateX(-30deg) rotateY(45deg);

}

100% {

-webkit-transform: rotateX(330deg) rotateY(405deg);

transform: rotateX(330deg) rotateY(405deg);

}

}

總結

以上是生活随笔為你收集整理的html5把六张图片做成立方体,HTML5绘制在立方体上的几何曲线图形的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。