MW211 EXIT

devlog
CSS3/画像を反転
2014年03月09日
CSS3等で画像を横に反転させる方法(左右対称)。
┌──────────────────────────────────────┐
│img {                                                                       │
│    filter              :FlipH;             /* 旧IE(IE4以降)      */        │
│    -ms-filter          :"FlipH";           /* 旧IE(IE8以降)      */        │
│    -moz-transform      :scaleX(-1);        /* 旧Firefox          */        │
│    -webkit-transform   :scaleX(-1);        /* 旧Chrome、旧Safari */        │
│    -o-transform        :scaleX(-1);        /* Opera              */        │
│    transform           :scaleX(-1);        /* CSS3               */        │
│}                                                                           │
└──────────────────────────────────────┘

CSS3等で画像を縦に反転させる方法(上下対称)。
┌──────────────────────────────────────┐
│img {                                                                       │
│    filter              :FlipV;             /* 旧IE(IE4以降)      */        │
│    -ms-filter          :"FlipV";           /* 旧IE(IE8以降)      */        │
│    -moz-transform      :scaleY(-1);        /* 旧Firefox          */        │
│    -webkit-transform   :scaleY(-1);        /* 旧Chrome、旧Safari */        │
│    -o-transform        :scaleY(-1);        /* Opera              */        │
│    transform           :scaleY(-1);        /* CSS3               */        │
│}                                                                           │
└──────────────────────────────────────┘

CSS3等で画像を縦横に反転させる方法(斜対称)。
┌──────────────────────────────────────┐
│img {                                                                       │
│    filter              :FlipH FlipV;       /* 旧IE(IE4以降)      */        │
│    -ms-filter          :"FlipH" "FlipV";   /* 旧IE(IE8以降)      */        │
│    -moz-transform      :scale(-1, -1);     /* 旧Firefox          */        │
│    -webkit-transform   :scale(-1, -1);     /* 旧Chrome、旧Safari */        │
│    -o-transform        :scale(-1, -1);     /* Opera              */        │
│    transform           :scale(-1, -1);     /* CSS3               */        │
│}                                                                           │
└──────────────────────────────────────┘

CSS3のtransformに対応しているのは、
今のところ最新の「Firefox、Chrome、Safari」のみ。
分類:HTML5+CSS3