3D overview

    This site uses cookies. By continuing to browse this site, you are agreeing to our Cookie Policy.

    • 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

      HTML Source Code

      1. <div class = "earth">
      2. <div> </ div>
      3. </ div>
      Go
      Go

      CSS Source Code

      1. .earth {
      2. width: 300px;
      3. height: 300px;
      4. position: fixed;
      5. top: 0;
      6. bottom: 0;
      7. left: 0;
      8. right: 0;
      9. margin: auto;
      10. overflow: hidden;
      11. border-radius: 50%;
      12. box-shadow: 0 0 20px 20px # 000 inset, 0 0 20px 2px # 000;
      13. }
      14. Go
      15. .earth: after {
      16. position: absolute;
      17. content: "";
      18. top: 0;
      19. bottom: 0;
      20. left: 0;
      21. right: 0;
      22. box-shadow: -20px -20px 50px 2px # 000 inset;
      23. border-radius: 50%;
      24. }
      25. Go
      26. .earth> div {
      27. width: 200%;
      28. height: 100%;
      29. animation: spin 30s linear alternate infinite;
      30. background: url (https://web.opendrive.com/api/v1/download/file.json/NTlfMTQ1MTkzNDhf?inline=1);
      31. / * orginal image at https://upload.wikimedia.org/wikipedia/commons/thumb/c/c4/Earthmap1000x500compac.jpg/640px-Earthmap1000x500compac.jpg * /
      32. background-size: cover;
      33. }
      34. @keyframes spin {
      35. to {
      36. transform: translateX (-50%);
      37. }
      38. }
      Display All
    • Мне это не надо )) у меня со криптами все нормально полное 3д, а вот товарищам некоторым надо и это пвсевдо идет, как вариант можно сделать еще короче по коду..а то что Вы показали длинно я от этого ушел не интересно . и это уже не актуально так то

      Совсем простой вариант :) кому нужно можно по экспериментировать с наклоном и вариантами трансформации

      .earth
      {
      -webkit-transform: rotate(360deg);
      -moz-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
      -o-transform: rotate(360deg);
      transform: rotate(360deg);
      -moz-animation-name: earth;
      -moz-animation-duration: 120s;
      -webkit-animation-name: earth;
      -webkit-animation-duration: 120s;
      -moz-animation-timing-function: linear;
      -moz-animation-iteration-count: infinite;
      -moz-animation-direction: normal;
      -moz-animation-delay: 0;
      -moz-animation-play-state: running;
      -moz-animation-fill-mode: forwards;
      -webkit-animation-timing-function: linear;
      -webkit-animation-iteration-count: infinite;
      -webkit-animation-direction: normal;
      -webkit-animation-delay: 0;
      -webkit-animation-play-state: running;
      -webkit-animation-fill-mode: forwards;
      }
      @-webkit-keyframes earth {
      0% {
      -moz-transform: rotate(0deg);
      -webkit-transform: rotate(0deg);
      }
      100% {
      -moz-transform: rotate(-360deg);
      -webkit-transform: rotate(-360deg);
      }
      }
      @-moz-keyframes earth {
      0% {
      -moz-transform: rotate(0deg);
      -webkit-transform: rotate(0deg);
      }
      100% {
      -moz-transform: rotate(-360deg);
      -webkit-transform: rotate(-360deg);
      }
      }
      За разумную стоимость Сделаю любой динамический дизайн макет (или подготовлю в css) могу сделать копию любого стиля afire.space@gmail.com, а так же помогу разобраться с кодом и помощь сделать чистую сборку

      The post was edited 1 time, last by Shandow ().

    • вот этот код добавляет пульсацию

      .pulse {
      position:absolute;
      top:0;
      left:0;
      width:50px;
      height:50px;
      border-radius:25px;
      background:#dcf48a;
      -webkit-animation: pulsating 2s ease-in-out;
      -webkit-animation-iteration-count: infinite;
      opacity:0.0
      z-index:5;
      }

      .block{
      animation: pulse 6s infinite;
      animation: circle 100s linear infinite;
      }
      .block2{
      animation: pulse 6s infinite;
      animation: circle 100s linear infinite;
      }

      @keyframes pulse{

      10%{
      opacity: 0.4;
      }
      25%{
      opacity: 0.5;
      }
      50%{
      opacity: 0.6;
      }
      75%{
      opacity: 0.4;
      }
      100%{
      opacity: 0.8;
      }
      }

      можно получить пару моментов
      но еще раз - это все пвсевдо полезно только для второстепенных решений

      даже два д - вот я показывал код вставляйте в таком порядке и будет работать

      <canvas id="ishca'></canvas>

      <script>
      $(function(){

      var pl_id = 'ishca';

      var image = new Image();
      image.src = './styles/theme/gow/planeten/planet3d/mond.jpg';

      // загружаем изображение тени и бликов планеты
      var fxShadow = new Image();
      fxShadow.src = './styles/theme/gow/planeten/planet3d/planet_shadow.png';

      // определяем длину и высоту элемента canvas
      var width = $('#'+pl_id).width();
      var height = $('#'+pl_id).height();

      // рассчитываем угол вращения планеты
      var beta = 360/900;
      var beta = (beta*Math.PI)/360;
      var l = (Math.sqrt(width*width+width*width))/2;
      var gam = Math.PI - ((Math.PI - (beta * Math.PI)/360)/2) - (Math.PI/4);
      var b = 2*l*Math.sin(beta/2);
      var x = b*Math.sin(gam);
      var y = b*Math.cos(gam);
      var p1 = Math.cos(beta);
      var p2 = Math.sin(beta);

      var canvas = document.getElementById(pl_id);
      var id = canvas.getContext("2d");

      var newMoveWidth = 0;
      var newMoveHeight = 0;

      var drawPl = function(){

      id.clearRect(0, 0, width, height);
      // применяем к нашей планете вращение
      id.transform(p1, p2, -p2, p1, x, -y);
      // рисуем карту с новыми координатами внутри элемента
      id.drawImage(image, newMoveWidth, newMoveHeight, width, height, 0, 0, width, height);
      //добавляем тень и блики
      id.drawImage(fxShadow, 0, 0, width, height);
      // если смещение достигло предела, начинаем сначала
      if (newMoveWidth >= 899.5) newMoveWidth = 0;
      else newMoveWidth = newMoveWidth+0.5; // иначе двигаем карту дальше

      }

      setInterval(drawPl, 80); // запускаем анимацию со скоростью 70 мс.

      });
      </script>
      За разумную стоимость Сделаю любой динамический дизайн макет (или подготовлю в css) могу сделать копию любого стиля afire.space@gmail.com, а так же помогу разобраться с кодом и помощь сделать чистую сборку