電子出版のＣＳＳについて

　電子出版と言うと紙をデジタルに置き換えたというイメージがあると思います。　だからできるだけ手軽で簡単にデジタルにできる方法が出回っています。しかし、表現ということを考えるとそれでいいのかなと思います。


　ワープロがではじめのときは、多くの人が一生懸命練習していまではものを書くときの必需品ですね。しかも、ワープロによって絵とか図とかを文書に自由にできるようになりました。ワープロによる新しい表現ができるようになったわけです。


　これを考えると、電子出版も紙の印刷物とは異なる独自の表現の仕方が可能だと思います。たとえば、前から言っている文字を動かす詩集です。


　yoruno3さんのブログタイトルの回転のＣＳＳを以下に示します。rotateX, rotateYはＸＹ回転、つまりＣＲＴの表面での回転ですが、perspectiveは画面の上の座標です。つまり、皆さんの見ている方向での回転です。立体的な回転ができて遠近法で表示されます。近ければ強い遠近法になり歪みがおおきくなります。yoruno3さんも回転を少し変えたら遠近が強くなりすぎたので、画面からの距離を少し話しました。普通にこれをプログラムで実現すると結構めんどうなことがCSSで簡単にできます。


　また、一番下のhoverはマウスをブログタイトルに乗せると止まります。けっこうインタラクテブです。いまのネット環境ではすこしサクサクとはいきませんが、５Ｇになると当たり前に使えるようになるのではないでしょうか。




*  タイトルのアニメーション  */
.skin-blogMainTitle {
    font-size: 180%;
     -webkit-animation: skin-blogMainTitle 15s ease 5s 5;
     animation: skin-blogMainTitle 15s ease 5s 5;
}
@-webkit-keyframes skin-blogMainTitle {
     0%   {-webkit-transform: perspective(40px) rotateX(0) rotateY(0) ;color:purple;}
    50%  {-webkit-transform: perspective(40px) rotateX(180deg)rotateY(180deg) ; color: purple; }
    51%  {-webkit-transform: perspective(40px) rotateX(180deg)rotateY(180deg) ; color: blue; }
  100%  {-webkit-transform: perspective(40px) rotateX(360deg)rotateY(360deg) ;}
}
@keyframes skin-blogMainTitle {
      0%   {transform: perspective(40px) rotateX(0)rotateY(0deg) ;color:purple;}
    50%   {transform: perspective(40px) rotateX(180deg)rotateY(180deg) ; color:purple;}
    51%   {transform: perspective(40px) rotateX(180deg)rotateY(180deg) ; color: blue;} 
  100%  {transform: perspective(40px) rotateX(360deg)rotateY(360deg) ;}
}
/* マウスを乗せたら止まる */
h1:hover{
       -webkit-animation-play-state: paused;
       animation-play-state: paused;
}