ボックス | 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

OFUSEで応援を送る

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

タグ

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

Photo by Luciann Photography on Pexels.com

今頃になってdocker(ドッカー)を勉強していたりしている。

2022.04.30

Logging

おはよう御座います。４月も今日が最後になってしまいました。

皆さんGW（ゴールデンウィーク）は何処か行きますか？、自分はしれっと仕事しているかも知れません。明日は休みですが・・・。

さて、今頃になってdocker(ドッカー)を勉強していたりしてします。dockerとはなんぞやという人はエンジニアでは恐らくないと思います😭。知らない方はググってくださいな。

今までdockerなんて使わなかった、バーチャルボックスがあれば何でも出来ると今でも思っていますが、まぁ一応、dockerも触らないといけないなとか思いましてdockerを始めました。

dockerでイメージを作ってdocker Hubで公開しようと思います。公開する内容は、PHP５系から８系までの環境を構築出来る提供するつもりです。

公開したら追記としてURLを記載しますので、しばしお待ち下さい。来月の半ばまでには構築出来る環境を提供するつもりです。

尚、dockerのCUIなどの操作方法はこちらを参照すると良いですよ。

追記出来ました（５月を待たずして）：https://hub.docker.com/r/zip358com/rockylinux-php-56-81-apache

docker pull zip358com/rockylinux-php-56-81-apache

docker run -d -p 80:80 --privileged --name 任意のコンテナ名 zip358com/rockylinux-php-56-81-apache /sbin/init

cgi-binを見てください。PHP5.6からPHP8.1まであります😌。

Apacheの設定、php-cgiを使用する方法はこんな感じです😀

<Directory "/var/www/cgi-bin">
    AllowOverride All
    Options FollowSymLinks
    Order allow,deny
    Allow from all
</Directory>
Action php-cgi-7.1.9 /cgi-bin/php-cgi-7.1.9
<Directory "/var/www/html/xxxx.site">
    Options +ExecCGI
    AddHandler php-cgi-7.1.9 .php .html
    AddType application/x-httpd-php .php
</Directory>

著者名 @taoka_toshiaki

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

OFUSEで応援を送る

投稿日時 2022年04月30 04:54日

タグ

4, 5, 8, docker, GW, Hub, php, url, イメージ, エンジニア, お待ち, カー, ゴールデンウィーク, しれっと, つもり, バーチャル, ボックス, 人, 今, 今日, 今頃, 仕事, 休み, 公開, 内容, 勉強, 半ば, 提供, 方, 明日, 最後, 来月, 構築, 環境, 皆さん, 自分, 記載, 追記,

クロスプラットフォーム開発（アプリ）をPythonで行う。

2021.05.21

Logging

PyQt5でクロスプラットフォーム開発（アプリ）を行う事が出来るだってさ。ただし、PyQt5は商用利用に縛りがあるのだとか、個人で使用する分には問題なしだということ。CSSとPythonの記述が分かっていればそれほど難しくない難易度かと自分は下記の動画を見て思いました。

Create GUI App with PyQt5 – PART 1

pip install PyQt5

Python：パイソンがインストールしている環境で上記のコマンドを打つことでPyQt5はインストール可能です。あとはコードを書いて実行するだけでアプリが実行されます。

PyQt5の使い方を解説している人がいます。リンク先のように書けばチェックボックスなども設置可能です。因みにコードを一々書くのは面倒だという方はQt Designerと連携することでGUIの設計は楽になると思います。
環境構築を説明しているリンクを貼っときます。こちらでPyQt5のプログラムを使用しQt Designerで開発を行えます。

この頃はクロスプラットフォーム開発も多様化していろいろな言語で開発ができるようになってきてますね。楽になったものだと・・・。

追伸：商業利用でクロスプラットフォーム開発が行いたい場合はPySideを使用するべしです。理由はこちら
https://www.kimoton.com/entry/20181202/1543724518

著者名 @taoka_toshiaki

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

OFUSEで応援を送る

投稿日時 2021年05月21 04:33日

タグ

5, css, Designer, GUI, install, pip, PyQt, Python, Qt, あと, アプリ, インストール, えま, クロス, コード, こちら, こと, コマンド, チェック, パイソン, プラットフォーム, プログラム, ボックス, リンク, 上記, 下記, 事, 人, 使い方, 使用, 個人, 分, 利用, 動画, 可能, 商用, 実行, 方, 構築, 環境, 縛り, 自分, 行, 解説, 記述, 設置, 設計, 説明, 連携, 開発, 難易, 面倒,