怎樣用css3技術做出立方體旋轉寄光的特效

最後更新：2017-11-25 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

這次給大家帶來的是用CSS3做出立方體旋轉寄光的特效，怎樣用CSS3做出這麼炫酷的特效呢？以下是代碼案列，感興趣的朋友也可以自己動手做一份試試。

<!doctype html><html><head><meta charset="utf-8"><title>CSS3 3D立方體旋轉寄光動畫特效</title><style>body {margin: 0;overflow: hidden;width: 100vw;height: 100vh;background: #222;display: -webkit-box;display: -ms-flexbox;display: flex;-ms-flex-wrap: wrap;flex-wrap: wrap;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;align-items: center;}.world {-webkit-perspective: 800px;perspective: 800px;width: 100vh;height: 100vh;display: -webkit-box;display: -ms-flexbox;display: flex;-ms-flex-wrap: wrap;flex-wrap: wrap;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;align-items: center;}.cube {-webkit-transform-style: preserve-3d;transform-style: preserve-3d;-webkit-backface-visibility: hidden;backface-visibility: hidden;width: 50vh;height: 50vh;position: relative;-webkit-animation: rotator 4.5s linear infinite;animation: rotator 4.5s linear infinite;outline: 0;}.cube * {background: #000;box-shadow: 0 0 3vh currentColor;-webkit-transition: background 0.4s ease-in-out, box-shadow 0.4s ease-in-out;transition: background 0.4s ease-in-out, box-shadow 0.4s ease-in-out;}.cube:hover * {background: currentColor;box-shadow: 0 0 20vh currentColor;}.cube .cubefront {color: deeppink;-webkit-transform: translateZ(25vh);transform: translateZ(25vh);position: absolute;top: 0;left: 0;width: 100%;height: 100%;}.cube .cuberight {color: lightcoral;-webkit-transform: rotateY(90deg) translateZ(25vh);transform: rotateY(90deg) translateZ(25vh);position: absolute;top: 0;left: 0;width: 100%;height: 100%;}.cube .cubeleft {color: skyblue;-webkit-transform: rotateY(270deg) translateZ(25vh);transform: rotateY(270deg) translateZ(25vh);position: absolute;top: 0;left: 0;width: 100%;height: 100%;}.cube .cubeback {color: seagreen;position: absolute;top: 0;left: 0;width: 100%;height: 100%;-webkit-transform: rotateY(180deg) translateZ(25vh);transform: rotateY(180deg) translateZ(25vh);}.cube .cubetop {color: mediumseagreen;-webkit-transform: rotateX(90deg) translateZ(25vh);transform: rotateX(90deg) translateZ(25vh);position: absolute;top: 0;left: 0;width: 100%;height: 100%;}.cube .cubebottom {color: dodgerblue;-webkit-transform: rotateX(270deg) translateZ(25vh);transform: rotateX(270deg) translateZ(25vh);position: absolute;top: 0;left: 0;width: 100%;height: 100%;}@-webkit-keyframes rotator {0% {-webkit-transform: rotateX(0deg) rotateY(0deg);transform: rotateX(0deg) rotateY(0deg);}100% {-webkit-transform: rotateX(360deg) rotateY(360deg);transform: rotateX(360deg) rotateY(360deg);}}@keyframes rotator {0% {-webkit-transform: rotateX(0deg) rotateY(0deg);transform: rotateX(0deg) rotateY(0deg);}100% {-webkit-transform: rotateX(360deg) rotateY(360deg);transform: rotateX(360deg) rotateY(360deg);}}</style></head><body><div><div tabindex="0"><div></div><div></div><div></div><div></div><div></div><div></div></div></div></body></html>

立方體旋轉寄光的特效的代碼就是這麼多了，更多精彩請關注php中文網其它相關文章！

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More