css实现可旋转的三维口袋球效果代码
代码语言：html
所属分类：三维
代码描述：css实现可旋转的三维口袋球效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
/***********************/
/***********************/
/***********************/
*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: border-box;
transform-style: preserve-3d;
user-select: none;
-webkit-tap-highlight-color: transparent;
appearance: none;
font-family: "Press Start 2P", cursive;
}
/***********************/
/***********************/
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
width: 100%;
font-weight: bolder;
overflow: hidden;
cursor: pointer;
background-color: #6e68d8;
}
.face {
position: absolute;
}
.flex {
display: flex;
justify-content: center;
align-items: center;
}
/***********************/
/***********************/
.main,
.sphere {
position: absolute;
width: 45vmin;
height: 45vmin;
}
.main {
transform: perspective(1200vmin) rotateX(70deg) rotateZ(40deg) translateZ(-21vmin);
transition: transform 200ms ease-out;
}
.shadow {
position: absolute;
width: 100%;
height: 100%;
transform: translateZ(-6vmin);
border-radius: 50%;
background-color: #473fce;
filter: blur(1.5vmin);
}
.sphere::before, .sphere::after {
content: "";
position: absolute;
width: 6vmin;
height: 6vmin;
border-radius: 50%;
background-image: linear-gradient(to left, #c4c8df, #a3aacd);
transform: translateZ(-1.47vmin);
}
.sphere::after {
transform: translateZ(43.5vmin);
background-image: linear-gradient(to left, #ed060f, #bc040c);
}
.sphere-item1 {
position: absolute;
width: 6vmin;
height: 11.25vmin;
transform: rotateY(90deg) translateX(0.6375vmin);
display: flex;
justify-content: center;
align-items: center;
position: absolute;
}
.sphere-item1__side {
position: absolute;
height: 1.875vmin;
width: 6vmin;
background-color: #b3b9d6;
}
.sphere-item1__side:nth-of-type(1) {
transform: rotateX(12deg) translateZ(5.625vmin) rotateY(75deg);
}
.sphere-item1__side:nth-of-type(2) {
transform: rotateX(24deg) translateZ(5.625vmin) rotateY(75deg);
}
.sphere-item1__side:nth-of-type(3) {
transform: rotateX(36deg) translateZ(5.625vmin) rotateY(75deg);
}
.sphere-item1__side:nth-of-type(4) {
transform: rotateX(48deg) translateZ(5.625vmin) rotateY(75deg);
}
.sphere-item1__side:nth-of-type(5) {
transform: rotateX(60deg) translateZ(5.625vmin) rotateY(75deg);
}
.sphere-item1__side:nth-of-type(6) {
transform: rotateX(72deg) translateZ(5.625vmin) rotateY(75deg);
}
.sphere-item1__side:nth-of-type(7) {
transform: rotateX(84deg) translateZ(5.625vmin) rotateY(75deg);
}
.sphere-item1__side:nth-of-type(8) {
transform: rotateX(96deg) translateZ(5.625vmin) rotateY(75deg);
}
.sphere-item1__side:nth-of-type(9) {
transform: rotateX(108deg) translateZ(5.625vmin) rotateY(75deg);
}
.sphere-item1__side:nth-of-type(10) {
transform: rotateX(120deg) translateZ(5.625vmin) rotateY(75deg);
}
.sphere-item1__side:nth-of-type(11) {
transform: rotateX(132deg) translateZ(5.625vmin) rotateY(75deg);
}
.sphere-item1__side:nth-of-type(12) {
transform: rotateX(144deg) translateZ(5.625vmin) rotateY(75deg);
}
.sphere-item1__side:nth-of-type(13) {
transform: rotateX(156deg) translateZ(5.625vmin) rotateY(75deg);
}
.sphere-item1__side:nth-of-type(14) {
transform: rotateX(168deg) translateZ(5.625vmin) rotateY(75deg);
}
.sphere-item1__side:nth-of-type(15) {
transform: rotateX(180deg) translateZ(5.625vmin) rotateY(75deg);
}
.sphere-item1__side:nth-of-type(16) {
transform: rotateX(192deg) translateZ(5.625vmin) rotateY(75deg);
}
.sphere-item1__side:nth-of-type(17) {
transform: rotateX(204deg) translateZ(5.625vmin) rotateY(75deg);
}
.sphere-item1__side:nth-of-type(18) {
transform: rotateX(216deg) translateZ(5.625vmin) rotateY(75deg);
}
.sphere-item1__side:nth-of-type(19) {
transform: rotateX(228deg) translateZ(5.625vmin) rotateY(75deg);
}
.sphere-item1__side:nth-of-type(20) {
transform: rotateX(240deg) translateZ(5.625vmin) rotateY(75deg);
}
.sphere-item1__side:nth-of-type(21) {
transform: rotateX(252deg) translateZ(5.625vmin) rotateY(75deg);
}
.sphere-item1__side:nth-of-type(22) {
transform: rotateX(264deg) translateZ(5.625vmin) rotateY(75deg);
}
.sphere-item1__side:nth-of-type(23) {
transform: rotateX(276deg) translateZ(5.625vmin) rotateY(75deg);
}
.sphere-item1__side:nth-of-type(24) {
transform: rotateX(288deg) translateZ(5.625vmin) rotateY(75deg);
}
.sphere-item1__side:nth-of-type(25) {
transform: rotateX(300deg) translateZ(5.625vmin) rotateY(75deg);
}
.sphere-item1__side:nth-of-type(26) {
transform: rotateX(312deg) translateZ(5.625vmin) rotateY(75deg);
}
.sphere-item1__side:nth-of-type(27) {
transform: rotateX(324deg) translateZ(5.625vmin) rotateY(75deg);
}
.sphere-item1__side:nth-of-type(28) {
transform: rotateX(336deg) translateZ(5.625vmin) rotateY(75deg);
}
.sphere-item1__side:nth-of-type(29) {
transform: rotateX(348deg) translateZ(5.625vmin) rotateY(75deg);
}
.sphere-item1__side:nth-of-type(30) {
transform: rotateX(360deg) translateZ(5.625vmin) rotateY(75deg);
}
.sphere-item1__side:nth-of-type(1) {
background-color: #e0e2ee;
}
.sphere-item1__side:nth-of-type(2) {
background-color: #dbdeec;
}
.sphere-item1__side:nth-of-type(3) {
background-color: #d6d9e9;
}
.sphere-item1__side:nth-of-type(4) {
background-color: #d1d5e6;
}
.sphere-item1__side:nth-of-type(5) {
background-color: #ccd0e4;
}
.sphere-item1__side:nth-of-type(6) {
background-color: #c7cbe1;
}
.sphere-item1__side:nth-of-type(7) {
background-color: #c2c7de;
}
.sphere-item1__side:nth-of-type(8) {
background-color: #bdc2dc;
}
.sphere-item1__side:nth-of-type(9) {
background-color: #b8bed9;
}
.sphere-item1__side:nth-of-type(10) {
background-color: #b3b9d6;
}
.sphere-item1__side:nth-of-type(11) {
background-color: #aeb5d4;
}
.sphere-item1__side:nth-of-type(12) {
background-color: #a9b0d1;
}
.sphere-item1__side:nth-of-type(13) {
background-color: #a4abce;
}
.sphere-item1__side:nth-of-type(14) {
background-color: #9fa7cc;
}
.sphere-item1__side:nth-of-type(15) {
background-color: #9aa2c9;
}
.sphere-item1__side:nth-last-of-type(1) {
background-color: #e0e2ee;
}
.sphere-item1__side:nth-last-of-type(2) {
background-color: #dbdeec;
}
.sphere-item1__side:nth-last-of-type(3) {
background-color: #d6d9e9;
}
.sphere-item1__side:nth-last-of-type(4) {
background-color: #d1d5e6;
}
.sphere-item1__side:nth-last-of-type(5) {
background-color: #ccd0e4;
}
.sphere-item1__side:nth-last-of-type(6) {
background-color: #c7cbe1;
}
.sphere-item1__side:nth-last-of-type(7) {
background-color: #c2c7de;
}
.sphere-item1__side:nth-last-of-type(8) {
background-color: #bdc2dc;
}
.sphere-item1__side:nth-last-of-type(9) {
background-color: #b8bed9;
}
.sphere-item1__side:nth-last-of-type(10) {
background-color: #b3b9d6;
}
.sphere-item1__side:nth-last-of-type(11) {
background-color: #aeb5d4;
}
.sphere-item1__side:nth-last-of-type(12) {
background-color: #a9b0d1;
}
.sphere-item1__side:nth-last-of-type(13) {
background-color: #a4abce;
}
.sphere-item1__side:nth-last-of-type(14) {
background-color: #9fa7cc;
}
.sphere-item1__side:nth-last-of-type(15) {
background-color: #9aa2c9;
}
.sphere-item1__side {
clip-path: polygon(0 0, 100% 27%, 100% 73%, 0% 100%);
}
.sphere-item2 {
position: absolute;
width: 6vmin;
height: 22.05vmin;
transform: rotateY(90deg) translateX(-1.65vmin);
display: flex;
justify-content: center;
align-items: center;
position: absolute;
}
.sphere-item2__side {
position: absolute;
height: 2.94vmin;
width: 6vmin;
background-color: #b3b9d6;
}
.sphere-item2__side:nth-of-type(1) {
transform: rotateX(12deg) translateZ(11.025vmin) rotateY(60deg);
}
.sphere-item2__side:nth-of-type(2) {
transform: rotateX(24deg) translateZ(11.025vmin) rotateY(60deg);
}
.sphere-item2__side:nth-of-type(3) {
transform: rotateX(36deg) translateZ(11.025vmin) rotateY(60deg);
}
.sphere-item2__side:nth-of-type(4) {
transform: rotateX(48deg) translateZ(11.025vmin) rotateY(60deg);
}
.sphere-item2__side:nth-of-type(5) {
transform: rotateX(60deg) translateZ(11.025vmin) rotateY(60deg);
}
.sphere-item2__side:nth-of-type(6) {
transform: rotateX(72deg) translateZ(11.025vmin) rotateY(60deg);
}
.sphere-item2__side:nth-of-type(7) {
transform: rotateX(84deg) translateZ(11.025vmin) rotateY(60deg);
}
.sphere-item2__side:nth-of-type(8) {
transform: rotateX(96deg) translateZ(11.025vmin) rotateY(60deg);
}
.sphere-item2__side:nth-of-type(9) {
transform: rotateX(108deg) translateZ(11.025vmin) rotateY(60deg);
}
.sphere-item2__side:nth-of-type(10) {
transform: rotateX(120deg) translateZ(11.025vmin) rotateY(60deg);
}
.sphere-item2__side:nth-of-type(11) {
transform: rotateX(132deg) translateZ(11.025vmin) rotateY(60deg);
}
.sphere-item2__side:nth-of-type(12) {
transform: rotateX(144deg) translateZ(11.025vmin) rotateY(60deg);
}
.sphere-item2__side:nth-of-type(13) {
transform: rotateX(156deg) translateZ(11.025vmin) rotateY(60deg);
}
.sphere-item2__side:nth-of-type(14) {
transform: rotateX(168deg) translateZ(11.025vmin) rotateY(60deg);
}
.sphere-item2__side:nth-of-type(15) {
transform: rotateX(180deg) translateZ(11.025vmin) rotateY(60deg);
}
.sphere-item2__side:nth-of-type(16) {
transform: rotateX(192deg) translateZ(11.025vmin) rotateY(60deg);
}
.sphere-item2__side:nth-of-type(17) {
transform: rotateX(204deg) translateZ(11.025vmin) rotateY(60deg);
}
.sphere-item2__side:nth-of-type(18) {
transform: rotateX(216deg) translateZ(11.025vmin) rotateY(60deg);
}
.sphere-item2__side:nth-of-type(19) {
transform: rotateX(228deg) translateZ(11.025vmin) rotateY(60deg);
}
.sphere-item2__side:nth-of-type(20) {
transform: rotateX(240deg) translateZ(11.025vmin) rotateY(60deg);
}
.sphere-item2__side:nth-of-type(21) {
transform: rotateX(252deg) translateZ(11.025vmin) rotateY(60deg);
}
.sphere-item2__side:nth-of-type(22) {
transform: rotateX(264deg) translateZ(11.025vmin) rotateY(60deg);
}
.sphere-item2__side:nth-of-type(23) {
transform: rotateX(276deg) translateZ(11.025vmin) rotateY(60deg);
}
.sphere-item2__side:nth-of-type(24) {
transform: rotateX(288deg) translateZ(11.025vmin) rotateY(60deg);
}
.sphere-item2__side:nth-of-type(25) {
transform: rotateX(300deg) translateZ(11.025vmin) rotateY(60deg);
}
.sphere-item2__side:nth-of-type(26) {
transform: rotateX(312deg) translateZ(11.025vmin) rotateY(60deg);
}
.sphere-item2__side:nth-of-type(27) {
transform: rotateX(324deg) translateZ(11.025vmin) rotateY(60deg);
}
.sphere-item2__side:nth-of-type(28) {
transform: rotateX(336deg) translateZ(11.025vmin) rotateY(60deg);
}
.sphere-item2__side:nth-of-type(29) {
transform: rotateX(348deg) translateZ(11.025vmin) rotateY(60deg);
}
.sphere-item2__side:nth-of-type(30) {
transform: rotateX(360deg) translateZ(11.025vmin) rotateY(60deg);
}
.sphere-item2__side:nth-of-type(1) {
background-color: #e0e2ee;
}
.sphere-item2__side:nth-of-type(2) {
background-color: #dbdeec;
}
.sphere-item2__side:nth-of-type(3) {
background-color: #d6d9e9;
}
.sphere-item2__side:nth-of-type(4) {
background-color: #d1d5e6;
}
.sphere-item2__side:nth-of-type(5) {
background-color: #ccd0e4;
}
.sphere-item2__side:nth-of-type(6) {
background-color: #c7cbe1;
}
.sphere-item2__side:nth-of-type(7) {
background-color: #c2c7de;
}
.sphere-item2__side:nth-of-type(8) {
background-color: #bdc2dc;
}
.sphere-item2__side:nth-of-type(9) {
background-color: #b8bed9;
}
.sphere-item2__side:nth-of-type(10) {
background-color: #b3b9d6;
}
.sphere-item2__side:nth-of-type(11) {
background-color: #aeb5d4;
}
.sphere-item2__side:nth-of-type(12) {
background-color: #a9b0d1;
}
.sphere-item2__side:nth-of-type(13) {
background-color: #a4abce;
}
.sphere-item2__side:nth-of-type(14) {
background-color: #9fa7cc;
}
.sphere-item2__side:nth-of-type(15) {
background-color: #9aa2c9;
}
.sphere-item2__side:nth-last-of-type(1) {
background-color: #e0e2ee;
}
.sphere-item2__side:nth-last-of-type(2) {
background-color: #dbdeec;
}
.sphere-item2__side:nth-last-of-type(3) {
background-color: #d6d9e9;
}
.sphere-item2__side:nth-last-of-type(4) {
background-color: #d1d5e6;
}
.sphere-item2__side:nth-last-of-type(5) {
background-color: #ccd0e4;
}
.sphere-item2__side:nth-last-of-type(6) {
background-color: #c7cbe1;
}
.sphere-item2__side:nth-last-of-type(7) {
background-color: #c2c7de;
}
.sphere-item2__side:nth-last-of-type(8) {
background-color: #bdc2dc;
}
.sphere-item2__side:nth-last-of-type(9) {
background-color: #b8bed9;
}
.sphere-item2__side:nth-last-of-type(10) {
background-color: #b3b9d6;
}
.sphere-item2__side:nth-last-of-type(11) {
background-color: #aeb5d4;
}
.sphere-item2__side:nth-last-of-type(12) {
background-color: #a9b0d1;
}
.sphere-item2__side:nth-last-of-type(13) {
background-color: #a4abce;
}
.sphere-item2__side:nth-last-of-type(14) {
background-color: #9fa7cc;
}
.sphere-item2__side:nth-last-of-type(15) {
background-color: #9aa2c9;
}
.sphere-item2__side {
clip-path: polygon(0 0, 100% 16%, 100% 86%, 0% 100%);
}
.sphere-item3 {
position: absolute;
width: 6vmin;
height: 31.35vmin;
transform: rotateY(90deg) translateX(-5.1vmin);
display: flex;
justify-content: center;
align-items: center;
position: absolute;
}
.sphere-item3__side {
position: absolute;
height: 3.89785vmin;
width: 6vmin;
background-color: #b3b9d6;
}
.sphere-item3__side:nth-of-type(1) {
transform: rotateX(12deg) translateZ(15.675vmin) rotateY(48deg);
}
.sphere-item3__side:nth-of-type(2) {
transform: rotateX(24deg) translateZ(15.675vmin) rotateY(48deg);
}
.sphere-item3__side:nth-of-type(3) {
transform: rotateX(36deg) translateZ(15.675vmin) rotateY(48deg);
}
.sphere-item3__side:nth-of-type(4) {
transform: rotateX(48deg) translateZ(15.675vmin) rotateY(48deg);
}
.sphere-item3__side:nth-of-type(5) {
transform: rotateX(60deg) translateZ(15.675vmin) rotateY(48deg);
}
.sphere-item3__side:nth-of-type(6) {
transform: rotateX(72deg) translateZ(15.675vmin) rotateY(48deg);
}
.sphere-item3__side:nth-of-type(7) {
transform: rotateX(84deg) translateZ(15.675vmin) rotateY(48deg);
}
.sphere-item3__side:nth-of-type(8) {
transform: rotateX(96deg) translateZ(15.675vmin) rotateY(48deg);
}
.sphere-item3__side:nth-of-type(9) {
transform: rotateX(108deg) translateZ(15.675vmin) rotateY(48deg);
}
.sphere-item3__side:nth-of-type(10) {
transform: rotateX(120deg) translateZ(15.675vmin) rotateY(48deg);
}
.sphere-item3__side:nth-of-type(11) {
transform: rotateX(132deg) translateZ(15.675vmin) rotateY(48deg);
}
.sphere-item3__side:nth-of-type(12) {
transform: rotateX(144deg) translateZ(15.675vmin) rotateY(48deg);
}
.sphere-item3__side:nth-of-type(13) {
transform: rotateX(156deg) translateZ(15.675vmin) rotateY(48deg);
}
.sphere-item3__side:nth-of-type(14) {
transform: rotateX(168deg) translateZ(15.675vmin) rotateY(48deg);
}
.sphere-item3__side:nth-of-type(15) {
transform: rotateX(180deg) translateZ(15.675vmin) rotateY(48deg);
}
.sphere-item3__side:nth-of-type(16) {
transform: rotateX(192deg) translateZ(15.675vmin) rotateY(48deg);
}
.sphere-item3__side:nth-of-type(17) {
transform: rotateX(204deg) translateZ(15.675vmin) rotateY(48deg);
}
.sphere-item3__side:nth-of-type(18) {
transform: rotateX(216deg) translateZ(15.675vmin) rotateY(48deg);
}
.sphere-item3__side:nth-of-type(19) {
transform: rotateX(228deg) translateZ(15.675vmin) rotateY(48deg);
}
.sphere-item3__side:nth-of-type(20) {
transform: rotateX(240deg) translateZ(15.675vmin) rotateY(48deg);
}
.sphere-item3__side:nth-of-type(21) {
transform: rotateX(252deg) translateZ(15.675vmin) rotateY(48deg);
}
.sphere-item3__side:nth-of-type(22) {
transform: rotateX(264deg) translateZ(15.675vmin) rotateY(48deg);
}
.sphere-item3__side:nth-of-type(23) {
transform: rotateX(276deg) translateZ(15.675vmin) rotateY(48deg);
}
.sphere-item3__side:nth-of-type(24) {
transform: rotateX(288deg) translateZ(15.675vmin) rotateY(48deg);
}
.sphere-item3__side:nth-of-type(25) {
transform: rotateX(300deg) translateZ(15.675vmin) rotateY(48deg);
}
.sphere-item3__side:nth-of-type(26) {
transform: rotateX(312deg) translateZ(15.675vmin) rotateY(48deg);
}
.sphere-item3__side:nth-of-type(27) {
transform: rotateX(324deg) translateZ(15.675vmin) rotateY(48deg);
}
.sphere-item3__side:nth-of-type(28) {
transform: rotateX(336deg) translateZ(15.675vmin) rotateY(48deg);
}
.sphere-item3__side:nth-of-type(29) {
transform: rotateX(348deg) translateZ(15.675vmin) rotateY(48deg);
}
.sphere-item3__side:nth-of-type(30) {
transform: rotateX(360deg) translateZ(15.675vmin) rotateY(48deg);
}
.sphere-item3__side:nth-of-type(1) {
background-color: #e0e2ee;
}
.sphere-item3__side:nth-of-type(2) {
background-color: #dbdeec;
}
.sphere-item3__side:nth-of-type(3) {
background-color: #d6d9e9;
}
.sphere-item3__side:nth-of-type(4) {
background-color: #d1d5e6;
}
.sphere-item3__side:nth-of-type(5) {
background-color: #ccd0e4;
}
.sphere-item3__side:nth-of-type(6) {
background-color: #c7cbe1;
}
.sphere-item3__side:nth-of-type(7) {
background-color: #c2c7de;
}
.sphere-item3__side:nth-of-type(8) {
background-color: #bdc2dc;
}
.sphere-item3__side:nth-of-type(9) {
background-color: #b8bed9;
}
.sphere-item3__side:nth-of-type(10) {
background-color: #b3b9d6;
}
.sphere-item3__side:nth-of-type(11) {
background-color: #aeb5d4;
}
.sphere-item3__side:nth-of-type(12) {
backgr.........完整代码请登录后点击上方下载按钮下载查看
相似代码
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0