このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。

Archives Details

AndroidでrotateX等が適応されない時の代替え CSS3アニメ処理

Android

2012.02.25

この記事は最終更新日から1年以上が経過しています。

困った。非常に困った。

Andoriod端末でCSS3プロパティのtransformの rotateX、rotateY、rotateZが適応されていない。。

焦りました。rotateは適応されるみたいです。

そもそもrotate()て何?って方のために軽く説明を。

rotate : 要素を回転させるプロパティです。

rotate()関数では、角度によって2D回転を指定します。指定の仕方は transform: rotate(160deg);の様に数値によって指定します。

transform: rotate(160deg);は以下のようになります。

rotate(〜deg);左が適応前。右が適応後。緑は回転させる中心の軸

それではrotateX(〜deg);の解説を。

rotateXはx軸を中心に要素を回転させます。どゆことかというと、以下の様に感じです。

rotateX(〜deg); 左が適応前。右が適応後。緑は回転させる中心の軸

なんとなくイメージつかめたでしょうか?

rotateY(〜deg);はY軸を中心として要素を回転させます。

rotateY(〜deg); 左が適応前。右が適応後。緑は回転させる中心の軸

その他詳細はコチラの記事を参考に

CSS3 transform:rotate() 要素を回転表示する

このrotateX(〜deg);とrotateY(〜deg);また、rotateZ(〜deg);に関してAndoroid端末には適応されません。

(AndroidOS2.3調べ)

非常に困った。いや。困った。検索しても意外と検証されていなくて。。

なぜ困るかというと、CSS3におけるアニメーションで意外と重要なプロパティだからです。

『手紙の封が閉じるアニメーションが欲しい。』

といわれ、はいはいー。作成してみました。どゆこと、というとつまり、

こんな感じです。

ここで、rotateX(〜deg);の登場です。

transform-origin: bottom left;で回転軸を封の下に設定、rotateX(180deg);で回転させれば封が閉じるアニメーションのできあがり!

のはずでしたが、iPhoneでは思い通りのアニメーションですが、Androidではピクリとも致しませんでした。

おおおおおぉぉ〜〜。アンドロイドめぇーーー!

そこで思ったのは、perspective(3D効果)を使わない2DのrotateX(〜deg);ならscale();で擬似的に対応できるのではないかと。

つまりどゆことかというと、

上の様な回転軸transform-origin: bottom left;に設定したtransform:rotateX(180deg);のアニーションを作成する場合、

アニメーションの50%、つまり半分の地点はscale(1,0.01);と同じではないかと。

では検証。

transform:rotateX(0deg);

transform:rotateX(30deg);

transform:rotateX(45deg);

transform:rotateX(60deg);

transform:rotateX(75deg);

transform:rotateX(90deg);

回転するというより、縮小されているという印象があるかと思います。90degでは見えなくなります。

実はこれが大事。それでしたらscale();で代用できるのではと。では検証。

scale(1,1);

scale(1,0.75);

scale(1,0.5);

scale(1,0.25);

scale(1,0.01);

うーん。近い様な近くないようなw

でもAndroid端末で実装する際、代替えとしていける!と勝手に判断。

デモはこちらから

http://webcyou.com/demo/css3/flick/index000.html

回転しているようにやや、アニメーションの最初の方は縮小しない設定で、中心軸に近づくとスピードを増す設定にしてみました。

後は反転させればいいのですが、どうするかというと、反対の画像、または要素を用意しますw

cssスプライトとして、background-positionでずらすか、別画像を読み込むか、スマートフォンのパフォーマンス等を考慮して当方ではbackground-positionでずらして表示させました。

その際、ただ画像をずらすとその位置で別画像を読み込むだけになるので、

marginやtopやtranslate();で要素の位置をずらす必要と、translate()の軸をtop leftに変更する必要があります。

はい。力技ですw

 

デモページ

http://webcyou.com/demo/css3/flick/index001.html

うーん。切り替えの時もうちょっとスムーズにいけば。。。

まだまだ調整は必要ですが、代替えとしてはなんとかいけるかな。。と感じですね。

Androidで確認。「あれ」動いてないw

どうやら、上の指定でrotateX();の指定があるため挙動が変。

という訳で上の要素を削除。

デモページ

http://webcyou.com/demo/css3/flick/index001b.html

よし動いてる。とりあえずいまのところこれが限界かなぁ。

 

 

Comment

Related Article

Google PlayアプリをPCで。Androidエミュレーター「Genymotion」の設定方法

2016.07.02

Android 超爆速エミュレータ Genymotionを使う。Android Studio導入。

2015.05.24

Android開発はやっぱりAndroid Studioですかねー。

2015.05.19

Android端末 ADBコマンド webインスペクタのデバッグ方法

2014.07.28

【再掲】PCやMacで Androidアプリを動かす「BlueStacks」使い方

2014.02.19

HTC J One HTL22 を購入!!その結果。。。 UAとか、Webビューとか、スマートパスとかの話

2013.06.17

Android セキュリティー警告 証明書 エラー googleplayに接続できない場合

2013.06.11

AndroidでrotateX等が適応されない時の代替え CSS3アニメ処理

2012.02.25

9.png Android NINE Patch 画像作成(draw9patch)

2011.10.29

スマートフォン JavaScript ユーザーエージェント振分け

2011.08.18

CATEGORY LIST

LATEST NEWS

Mac Home brewでSDL2.0を簡単に環境設定

C

2020.06.24

Django django-rest-auth + Nuxt.js auth-module で作る SPA JWT OAuth ログインシステム その3

Python

2020.06.14

Django django-rest-auth + Nuxt.js auth-module で作る SPA JWT OAuth ログインシステム その2

Python

2020.06.08

Django django-rest-auth + Nuxt.js auth-module で作る SPA JWT OAuth ログインシステム その1

Python

2020.06.07

このコロナ禍で、飛沫感染防止など求められる中「電子メモパッド」が重宝。 1300円で購入可能な電子メモパッドが超絶便利な件。

tool

2020.06.02

OAuthのフローを可視化できるツールを作ってみました。

JavaScript

2020.05.17

Django django-allauthで、サクッとソーシャルログイン機能を実装

Python

2020.04.12

部下を育てる技術

イベント

2020.04.08

令和の時代に、JavaScriptで Shift-JISファイル作成 全銀データフォーマットに対応する。

JavaScript

2020.03.03

インターネットにて世論調査を行う「世論Web」サービスを始めてみました。

JavaScript

2020.01.31

まだ間に合う!!ラズベリーパイ購入なら「RSコンポーネンツ」で!最大40%オフの年に1度の大特価期末セール中!

RaspberryPi

2020.01.25

年末のレトロゲーム熱の際、ファミコンソフト一覧パッケージ作ってました。

JavaScript

2020.01.24

RANKING

Follow

SPONSOR

現在、掲載募集中です。



Links

About Us

WEBデザイナーの、WEBデザイナーによる、WEBデザイナーの為のサイト。「みんなで書こう!」と仲間を募ってみたが、結局書くのは自分だけとなってしまいました。日々のメモを綴っていきます。

Entry Profile

Graphical FrontEnd Engineer
- Daisuke Takayama

MAD CITY 北九州市で生まれ育つ。20代はバンド活動に明け暮れ、ふと「webデザイナーになりたい。」と思い、デジタルハリウッド福岡校入学。卒業後、数々の賞を受賞、web業界をざわつかせる。
現在、主に、ゲーム制作中心に港区六本木界隈で活動中。

FOLLOW US