CSSだけで3Dボックス（箱）が作れるようにいつの間にかなっていた.自動回転！？

2025.04.16

Logging

おはようございます.CSSだけで3Dボックス（箱）が作れるようにいつの間にかなっていた話を書いていきます.生成AIにCSSだけで3Dボックス（箱）を作ってと指示を行ったら自動回転してくれるものを出力してくれて驚愕している.

CSSだけで3Dボックスが作れることは知っていたのだけど、自動回転はJSを使用しないと無理だろうと思っていたので、実際生成AIが出力されたのを見て驚きでした.こんな感じで旧の知識を生成AIはアップデートしてくれるのには、凄く良いと思っています.

ただ、質問して実際動かないものも出力されるので要は使う側もそれなりに知識を持っていないと嘘を信じてしまうことにもなるので、生成AIを使う側も最低限の知識は必要になると思っています.

因みにソースコードは下記になります.これをテキストファイルに保存して拡張子をhtmlに変えた後に、そのファイルをブラウザにドロップすると表示されます.

明日へ続く

デモページ：https://zip358.com/tool/demo96/

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>3D Box</title>
  <style>
    body {
      margin: 0;
      background: #111;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      perspective: 1000px;
    }

    .scene {
      width: 200px;
      height: 200px;
      position: relative;
      transform-style: preserve-3d;
      animation: rotate 10s infinite linear;
    }

    .face {
      position: absolute;
      width: 200px;
      height: 200px;
      background: rgba(0, 150, 255, 0.7);
      border: 2px solid #fff;
    }

    .front  { transform: translateZ(100px); }
    .back   { transform: rotateY(180deg) translateZ(100px); }
    .right  { transform: rotateY(90deg) translateZ(100px); }
    .left   { transform: rotateY(-90deg) translateZ(100px); }
    .top    { transform: rotateX(90deg) translateZ(100px); }
    .bottom { transform: rotateX(-90deg) translateZ(100px); }

    @keyframes rotate {
      from { transform: rotateX(0deg) rotateY(0deg); }
      to   { transform: rotateX(360deg) rotateY(360deg); }
    }
  </style>
</head>
<body>
  <div class="scene">
    <div class="face front"></div>
    <div class="face back"></div>
    <div class="face right"></div>
    <div class="face left"></div>
    <div class="face top"></div>
    <div class="face bottom"></div>
  </div>
</body>
</html>

著者名  @taoka_toshiaki

※この記事は著者が40代前半に書いたものです．

Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki

OFUSEで応援を送る

投稿日時 2025年04月16 06:00日

タグ

ソースコード, テキストファイル, デモページ, ファイル, ブラウザ, ボックス, 下記, 側, 嘘, 実際, 実際生成, 感じ, 拡張子, 指示, 旧, 最低限, 生成, 知識, 箱, 自動回転は,

ロボットの進化が止まらない。進化よ止まれロボット！

2021.09.03

Logging

また一週間ほど、雨模様だそうです。先月のブログの収益はジュース3本分ぐらいでした、ワンコインランチも食べれない…。収入が若干減少しましたがこれは誤差の範囲なので横ばいという表現が良いのかもしれません。

さて、立て続けにロボットの動画を見る日があったのでロボットのことを書こうかなと思います。

ロボット開発の中ではボストン・ダイナミクス社のロボットが自分は一番凄いなと思っているのだけど、いろいろな会社がロボット開発を行っていて人形ロボットから四角い箱のロボット、魚型ロボットなど使用される用途に適したロボットが作られています。人形ロボットが一番、進化すれば人の仕事を代行してくれるのだと思います。だから人形ロボットが一番、開発するのが難しいと言われているけど、その開発に挑む企業もいます。

Atlas | Partners in Parkour

もしスムーズに動く人形ロボットが生産されるようになれば、あっという間に大企業は労働をロボットへシフトしていくのだろうと思います。だだ、スムーズに動く人形ロボットを作るのは難しいと感じますが、イーロン・マスク率いるチームが来年（2022年）に人形ロボット（テスラボット）を発表すると意気込んでいます。下記の動画は人なのだけど、こんな感じに滑らかに動く人形ロボットが開発されたら驚異ですよね。

Tesla AI Day 2021

最終的には人と同様に滑らかに動くロボットが必要だろうと思います、例えば介護などの仕事を代替えするとなるとガクガクと動くロボットでは人を傷つけてしまう恐れがあるので、やはり滑らかに動くロボットが必要とされるでしょう。

これから先、ロボットに優しい工場や環境を作る企業も出てくると思います。ロボットだけが働く工場などは人ように工場を設計する必要がないので、コンパクトで且つエコな工場などになると思います。

Inside A Warehouse Where Thousands Of Robots Pack Groceries

何にせよ、ロボットの進化は凄まじいです。

著者名  @taoka_toshiaki

※この記事は著者が40代前半に書いたものです．

Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki

OFUSEで応援を送る

投稿日時 2021年09月03 08:11日

タグ

３, あっという間, いろいろ, コイン, こと, これ, シフト, ジュース, スムーズ, ダイナ, ブログ, ボストン, ミクス, ランチ, ロボット, ワン, 一, 中, 人, 人形, 仕事, 代行, 企業, 会社, 使用, 先月, 労働, 動画, 収入, 収益, 日, 横ばい, 減少, 生産, 用途, 立て続け, 箱, 範囲, 自分, 若干, 表現, 誤差, 進化, 開発, 雨模様, 魚,