如何用css3技術做出立方體旋轉發光的特效-css教學-PHP中文網

首頁

web前端

css教學

如何用css3技術做出立方體旋轉發光的特效

php中世界最好的语言

Nov 25, 2017 pm 03:21 PM

csscss3

這次帶給大家的是用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中文網其它相關文章！

相關閱讀：

使用CSS3做出帶有光暈流星旋轉光環的效果

#CSS3中過渡動畫怎麼使用

CSS3裡怎麼實現打字動畫

以上是如何用css3技術做出立方體旋轉發光的特效的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn