hey everyone, in case your looking for an easy 3d world implementation that you could work on an build here is a simple code for it...source is from
codepen.io/zFunx/pen/dZaGJG
Go
Go
Display All
codepen.io/zFunx/pen/dZaGJG
Go
Go
CSS Source Code
- .earth {
- width: 300px;
- height: 300px;
- position: fixed;
- top: 0;
- bottom: 0;
- left: 0;
- right: 0;
- margin: auto;
- overflow: hidden;
- border-radius: 50%;
- box-shadow: 0 0 20px 20px # 000 inset, 0 0 20px 2px # 000;
- }
- Go
- .earth: after {
- position: absolute;
- content: "";
- top: 0;
- bottom: 0;
- left: 0;
- right: 0;
- box-shadow: -20px -20px 50px 2px # 000 inset;
- border-radius: 50%;
- }
- Go
- .earth> div {
- width: 200%;
- height: 100%;
- animation: spin 30s linear alternate infinite;
- background: url (https://web.opendrive.com/api/v1/download/file.json/NTlfMTQ1MTkzNDhf?inline=1);
- / * orginal image at https://upload.wikimedia.org/wikipedia/commons/thumb/c/c4/Earthmap1000x500compac.jpg/640px-Earthmap1000x500compac.jpg * /
- background-size: cover;
- }
- @keyframes spin {
- to {
- transform: translateX (-50%);
- }
- }