3Då転(3D Transforms)
ãã®ãµã³ãã«ã®åä½ç¢ºèªæ¸ã¿ç°å¢ã
ãã·ã³ | ç°å¢ |
---|---|
iPhone | iPhone OS 3.1.2ã«ä»å±ã®Safari |
Mac | Safari 4.0.4 |
åºæ¬è¨å®
-webkit-transform-style: preserve-3d; /* 3D表ç¾ä½¿ç¨ãã */ -webkit-perspective: 100; /* ãã¼ã¹(é è¿æ)ã®è¨å® */ -webkit-transition: -webkit-transform 1s linear /* ã¢ãã¡ã¼ã·ã§ã³ã®åºæ¬åä½ãè¨å® */
ãã®æ§ã«è¨è¿°ãã¾ããåå¥ã«è§£èª¬ãã¾ãã
ã-webkit-transform-style: preserve-3d;ãã¯3D Transformsã使ãããã¨ãã«è¨è¿°ãã¾ãã
ã-webkit-perspectiveãã¯ãã¼ã¹(é è¿æ)ã®è¨å®ã詳ããã¯こちらã®ãã¼ã¸ã§ã¹ã©ã¤ãã¼ã移åããã¦ã¿ã¦ä¸ããã
ã-webkit-transition: -webkit-transform 1s linearãã¯ä½¿ç¨ãããã©ã³ã¸ã·ã§ã³ã®è¨å®ãä»åã¯1ç§éã§ç·å½¢ã«ã¢ãã¡ã¼ã·ã§ã³ãããã©ã³ã¹ãã©ã¼ã ã使ç¨ã
linear以å¤ã§è¨å®å¯è½ãªã¢ãã¡ã¼ã·ã§ã³ããã®åä½ãã¿ã¼ã³ã¯こちらã®ãµã¤ãã§ç¢ºèªã§ãã¾ãã
åä½èª¬æ
æ¢åã®ã¯ã©ã¹ã«å ãã¦ãç»åãã¯ãªãã¯ããæã«ä»¥ä¸ã®æ§ãªè¨å®ã®ã¯ã©ã¹ã追å ãã¦ãã¾ãã
.sampleX { -webkit-transform: rotateX(180deg); }
ããã«ããããrotateX(180deg);ãã®ãã©ã³ã¹ãã©ã¼ã ãè¡ãããX軸ã«å¯¾ãã0ã180°ã¾ã§ã®å転ãçºçãã¾ãã
ãµã³ãã«ã¯こちらã§ç¢ºèªã§ãã¾ããã¯ãªãã¯ããã¨å転ãã¾ãã
(2010/01/26 追è¨)
å転æ¹åã®æ
å ±ãã¾ã¨ãã¾ããã
3Då転(3D Transforms)ã®å転æ¹åã®èª¬æ - å¼·ç«ã§é²ã
http://d.hatena.ne.jp/nakamura001/20100126/1264479282