旧 | On the ghost Internet

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

2025.04.16

おはようございます.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

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

タグ

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

Photo by Magda Ehlers on Pexels.com

mixi2使っているの？.自分はアカウントはあるけどほぼ使用していないけど何か？.

2025.01.29

Logging

おはようございます.mixi2使っているの？.自分はアカウントはあるけどほぼ使用していない、理由はweb（ブラウザ版）がないからと言いたいところだけど、ブラウザ板があるThreadsなんかも使用していないBot化しているだけでXには勝てていない.

SNSは分散していっているけど、使い慣れたX（旧Twitter）はなかなか離れられれない.同じ機能のSNSが乱立しているのにXにはまだ勝ててない気がする.10年、20年と時間が経てばシェア率は変わっていくのだろうけど、4,5年ではあんまり変わらないじゃないのかなと.

そもそも人は使い慣れたものから違うものに中々移らないらしい.よほどコストダウンするとかする場合は話は別話だろうけど、無料で使用できるサービスはそういう感じらしい.だから何が何でも早くリリースした方が良い説がIT界隈には浸透している.

個人や零細企業は無料で公開するのは辞めといた方が良い.何故なら使われておしまいになるケースが多いので絶対的に課金するシステムを作った方が良い.

無料で公開する場合、皆が使用できるサービスで且つどんな年代でも使用できるサービスない厳しいと.

だからではないけど、mixi2はオープンにしないと世界的には広がらないじゃないのかと思います.

明日へ続く

著者名 @taoka_toshiaki

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

投稿日時 2025年01月29 06:00日

タグ

アカウント, おしまい, ケース, コスト, シェア率, システム, ブラウザ板, ブラウザ版, 別話, 厳しい, 年, 年代, 感じ, 旧, 機能, 理由, 界隈, 皆, 良い説, 零細企業,

いま、思っていることはノートパソコンで良くね？

2020.10.10

Logging

Lenovo ThinkPad X1 Nano Gen 1 Sizzle – The lightest ThinkPad ever

ノートパソコン買って、こんな感じに使うことができればそれで十分可能かと。この頃を思っています。基本的にパソコンって複数代、購入しても使用しているパソコンって一台か二台ぐらいではないですか？

自分の場合、旧のパソコンはサーバにしていて、使用するパソコンは一台だけですが、だったらノートパソコンで良くねという感じです。もう新しいパソコンを新調したので当分はこのデスクトップのパソコンを使用するつもりでいます。

https://www.youtube.com/watch?v=0aM3-YiRC-8

これから、パソコンを購入しようと考えている人は、断然、ハイスペックのノートパソコンをひとつ購入して、サブ画面として液晶ディスプレイを購入。上記の動画のような使用方法すれば全然、ストレス無く使用することが出来、なおかつ外出先でもパソコンを持っていけるのは本当に便利かなと思っています。

この頃の後悔はそれですね・・・。

著者名 @taoka_toshiaki

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

投稿日時 2020年10月10 02:45日

タグ

-YiRC-, 0, ３, 8, AM, com, https, watch, www, youtube, いま, こと, これ, サーバ, サブ, ストレス, それ, つもり, ディスプレイ, デスクトップ, ノートパソコン, ハイスペック, パソコン, ひとつ, 一, 上記, 二, 人, 使用, 便利, 動画, 可能, 場合, 外出, 当分, 後悔, 感じ, 新調, 方法, 旧, 本当, 液晶, 画面, 自分, 複数, 購入, 頃,

Access2013を購入します、旧のアクセスは持っているのだけどセキュリティ上使用できなくなったので購入します。ちなみにアクセスは、いまいち使い勝手良くなかったので今まで牽制していましたが、この頃、使用してみて基本的にエクセルVBAとそんなに変わらないなという事がわかりました。エクセルVBAにDB機能とシステム要素が付与したものと考えると良い感じですね。ただ、Formの呼び出しなどが、もっとソフト開発（VisualStudio）よりな呼び出しになっている感じです｛最初はわからなったです｝。よくよく考えるとVisualStudioなんてものを使用せずとも結構これだけで、ひと通りの事が出来そうです｛前にも同じこと言っていた気がします｝。
購入して何を作るかっていう所ですけどサンプルコードをひとつ作って見ようかなと、あとは、ちょっとしたデータ入力のために簡易てきな入力システムみたいなものを作ってみようと思いますが、こちらは公開しません。

著者名 @taoka_toshiaki

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

投稿日時 2014年08月16 02:49日

タグ

2013, access, db, Form, VBA, VisualStudio, アクセス, あと, いまいち, エクセル, コード, コチラ, こと, これだけ, サンプル, システム, セキュリティ, ソフト, ため, データ, ひとつ, ひと通り, もの, 事, 付与, 何, 使い勝手, 使用, 入力, 公開, 前, 感じ, 所, 旧, 最初, 本日, 機能, 気, 牽制, 簡易, 要素, 購入, 開発, 頃,

@Blog

日常日誌からプログラムやYOUTUBER紹介、旅日記まで日々更新中です。

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

mixi2使っているの？.自分はアカウントはあるけどほぼ使用していないけど何か？.

いま、思っていることはノートパソコンで良くね？

accessを購入します｛本日、購入｝。