{"id":3275,"date":"2012-03-20T04:13:46","date_gmt":"2012-03-19T19:13:46","guid":{"rendered":"http:\/\/www.webcyou.com\/?p=3275"},"modified":"2012-03-20T05:34:31","modified_gmt":"2012-03-19T20:34:31","slug":"3275","status":"publish","type":"post","link":"https:\/\/www.webcyou.com\/?p=3275","title":{"rendered":"JavaScript\u3067CSS3\u30b9\u30bf\u30a4\u30eb\u8a2d\u5b9a : css3\u3068JavaScript\u306e\u9023\u643a"},"content":{"rendered":"

JavaScript\u3092\u7528\u3044\u305fCSS\u306e\u30b9\u30bf\u30a4\u30eb\u5909\u66f4\u306f\u901a\u5e38\u3001<\/p>\n

element.style.backgroundColor = \"#ff00000\";<\/pre>\n
\u306a\u3069\u306e\u3088\u3046\u306b element.style.attribute = value;<\/strong><\/p>\n
\u3067\u5909\u66f4\u304c\u53ef\u80fd\u3068\u306a\u3063\u3066\u304a\u308a\u307e\u3059\u3002<\/p>\n
CSS3\u306e\u30d9\u30f3\u30c0\u30fc\u30d7\u30ea\u30d5\u30a3\u30c3\u30af\u30b9\u4ed8\u304d\u306e\u30b9\u30bf\u30a4\u30eb\u5909\u66f4\u306f\u4ee5\u4e0b\u306e\u3088\u3046\u306b<\/p>\n
css3<\/strong><\/p>\n
-webkit-transform:translate(100px,0);<\/pre>\n
\u306b\u5909\u66f4\u3059\u308b\u5834\u5408\u3001<\/p>\n
javaScript<\/strong><\/p>\n
.style.webkitTransform = \"translate(100px,0)\";<\/pre>\n
webkitTransform\u3067-webkit-\u306e\u30d9\u30f3\u30c0\u30fc\u30d7\u30ea\u30d5\u30a3\u30af\u30b9\u4ed8\u304d\u306e\u6307\u5b9a\u304c\u53ef\u80fd\u3067\u3059\u3002<\/p>\n
\u305d\u306e\u4ed6\u306e\u30d6\u30e9\u30a6\u30b6\u306e\u30d9\u30f3\u30c0\u30fc\u30d7\u30ea\u30d5\u30a3\u30c3\u30af\u30b9\u306f ‘transform’, ‘MozTransform’, ‘msTransform’, ‘OTransform’ \u3067\u6307\u5b9a\u3067\u304d\u307e\u3059\u3002<\/p>\n
webkit\u306e\u6307\u5b9a\u306f\u300cwebkit\u300d\u3067\u3082\u300cWebkit\u300d\u3067\u3082\u8a8d\u8b58\u3055\u308c\u308b\u306e\u3067\u3059\u304c\u3001\u6b63\u3057\u304f\u306fwebkit\u3068\u6700\u521d\u306f\u5c0f\u6587\u5b57\u306e\u3088\u3046\u3067\u3059\u3002 \u305d\u306e\u3042\u3068\u306e\u30d7\u30ed\u30d1\u30c6\u30a3\u306f\u57fa\u672c -\u7121\u3057\u3067\u982d\u3092\u5927\u6587\u5b57\u3067\u8a2d\u5b9a\u306f\u53ef\u80fd\u306e\u3088\u3046\u3067\u3059\u3002<\/p>\n
JavaScript\u00a0CSS3\u30d7\u30ed\u30d1\u30c6\u30a3\u8a2d\u5b9a<\/h4>\n
-webkit-transform
<\/strong>\u4f8b\uff1a<\/strong><\/p>\n
element.style.webkitTransform = \"translate(100px,100px) rotate(30deg)\";\r\nelement.style.webkitTransformOrigin = \"left top\";<\/pre>\n
-webkit-transition\u00a0<\/strong><\/p>\n
\u4f8b\uff1a<\/strong><\/p>\n
element.style.webkitTransitionProperty = \"-webkit-transform\";\r\nelement.style.webkitTransitionDelay= \"0.2s\";\r\nelement.style.webkitTransitionDuration = \"0.5s\";\r\nelement.style.webkitTransitionTimingFunction = \"ease-out\";<\/pre>\n
-webkit-border-radius\u00a0<\/strong><\/p>\n
\u4f8b\uff1a<\/strong><\/p>\n
element.style.webkitBorderRadius = \"50px\";<\/pre>\n
-webkit-box-shadow<\/strong><\/p>\n
 \u4f8b\uff1a<\/strong><\/p>\n
element.style.webkitBoxShadow = \"2px 2px 6px 2px rgba(0,0,0,0.7)\";<\/pre>\n
-webkit-gradient\u00a0<\/strong><\/p>\n
\u4f8b\uff1a<\/strong><\/p>\n
element.style.background = \"-webkit-gradient(linear, left top, left bottom, from(#990), color-stop(0.5,#f0f), to(#066))\";<\/pre>\n
-webkit-animation\u00a0<\/strong><\/p>\n
\u4f8b\uff1a<\/strong><\/p>\n
element.style.WebkitAnimationName = \"test\";\r\nelement.style.WebkitAnimationDuration = \"400ms\";\r\nelement.style.webkitAnimationIterationCount = 10;\r\nelement.style.webkitAnimationTimingFunction = \"ease-in-out\";<\/pre>\n
\u7b49\u3005\u3067css3\u306e\u8a2d\u5b9a\u304c\u884c\u3048\u307e\u3059\u3002 \u3053\u308c\u3089\u306fHTML\u306b\u30a4\u30f3\u30e9\u30a4\u30f3\u3067\u8ffd\u52a0\u3055\u308c\u308b\u306e\u3067\u6ce8\u610f\u3067\u3059\u3002<\/p>\n
\u30c7\u30e2\u30da\u30fc\u30b8<\/strong> http:\/\/webcyou.com\/demo\/js\/css3\/index.html<\/a><\/p>\n
\u307e\u3068\u3081<\/h4>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
CSS3<\/strong><\/td>\nJavaScript<\/strong><\/td>\n<\/tr>\n
 box-shadow<\/td>\nelemmnt.style.webkitBoxShadow<\/td>\n<\/tr>\n
 transform<\/td>\nelemmnt.style.webkitTransform<\/td>\n<\/tr>\n
 transform:translate<\/td>\nelemmnt.style.webkitTransform = “translate(px,px)”;<\/td>\n<\/tr>\n
 transform:scale<\/td>\nelemmnt.style.webkitTransform = “scale(x,y)”;<\/td>\n<\/tr>\n
 transform:rotate<\/td>\nelemmnt.style.webkitTransform = “rotate(deg)”;<\/td>\n<\/tr>\n
 transform:skew<\/td>\nelemmnt.style.webkitTransform = “skew(deg)”;<\/td>\n<\/tr>\n
 transform-origin<\/td>\nelemmnt.style.webkitTransformOrigin<\/td>\n<\/tr>\n
 transform-style<\/td>\nelemmnt.style.webkitTransformStyle<\/td>\n<\/tr>\n
 transition-property<\/td>\nelemmnt.style.webkitTransformProperty<\/td>\n<\/tr>\n
 transition-duration<\/td>\nelemmnt.style.webkitTransitionDuration<\/td>\n<\/tr>\n
 transition-timing-function<\/td>\nelemmnt.style.webkitTransitionTimingFunction<\/td>\n<\/tr>\n
 transition-delay<\/td>\nelemmnt.style.webkitTransitionDelay<\/td>\n<\/tr>\n
 animation-name<\/td>\nelemmnt.style.webkitAnimationName<\/td>\n<\/tr>\n
 animation-duration<\/td>\nelemmnt.style.webkitAnimationDuration<\/td>\n<\/tr>\n
 animation-timing-function<\/td>\nelemmnt.style.webkitAnimationTimingFunction<\/td>\n<\/tr>\n
 animation-iteration-count<\/td>\nelemmnt.style.webkitAnimationIterationCount<\/td>\n<\/tr>\n
animation-direction<\/td>\nelemmnt.style.webkitAnimationDirection<\/td>\n<\/tr>\n
 animation-play-state<\/td>\nelemmnt.style.webkitAnimationPlayState<\/td>\n<\/tr>\n
 animation-delay<\/td>\nelemmnt.style.webkitAnimationDelay<\/td>\n<\/tr>\n
\n
 background\u00a0linear-gradient<\/p>\n<\/td>\n
elemmnt.style.background = “-webkit-gradient(linear, ~~)”;<\/td>\n<\/tr>\n
 background\u00a0radial-gradient<\/td>\nelemmnt.style.background = “-webkit-gradient(radial, ~~)”;<\/td>\n<\/tr>\n
 text-shadow<\/td>\nelemmnt.style.textShadow<\/td>\n<\/tr>\n
 box-sizing<\/td>\nelemmnt.style.webkitBoxSizing<\/td>\n<\/tr>\n
 border-radius<\/td>\nelemmnt.style.webkitBorderRadius<\/td>\n<\/tr>\n
 border-top-left-radius<\/td>\nelemmnt.style.webkitBorderTopLeftRadius<\/td>\n<\/tr>\n
 border-top-right-radius<\/td>\nelemmnt.style.webkitBorderTopRightRadius<\/td>\n<\/tr>\n
 border-bottom-left-radius<\/td>\nelemmnt.style.webkitBorderBottomLeftRadius<\/td>\n<\/tr>\n
 border-bottom-right-radius<\/td>\nelemmnt.style.webkitBorderBottomRightRadius<\/td>\n<\/tr>\n
 border-image<\/td>\nelemmnt.style.webkitBorderImage<\/td>\n<\/tr>\n
 border-image-source<\/td>\nelemmnt.style.webkitBorderImageSource<\/td>\n<\/tr>\n
 border-image-slice<\/td>\nelemmnt.style.webkitBorderImageSlice<\/td>\n<\/tr>\n
 border-image-width<\/td>\nelemmnt.style.webkitBorderImageWidth<\/td>\n<\/tr>\n
 border-image-outset<\/td>\nelemmnt.style.webkitBorderImageOutset<\/td>\n<\/tr>\n
 border-image-repeat<\/td>\nelemmnt.style.webkitBorderImageRepeat<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n","protected":false},"excerpt":{"rendered":"
JavaScript\u3092\u7528\u3044\u305fCSS\u306e\u30b9\u30bf\u30a4\u30eb\u5909\u66f4\u306f\u901a\u5e38\u3001 element.style.backgroundColor = “#ff00000”; \u306a\u3069\u306e\u3088\u3046\u306b element.style.attribute = valu […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12],"tags":[73,171,59,167,177,168,176,47,179,50,46,120,119,69,96,111,178],"class_list":["post-3275","post","type-post","status-publish","format-standard","hentry","category-javascript","tag-actiinscript2-0","tag-android","tag-android-sdk","tag-css","tag-css3","tag-html","tag-html5","tag-javascript-2","tag-jquery","tag-jquery-mobile","tag-js","tag-sass","tag-scss","tag-transform","tag-transition","tag-wordpress-2","tag-178"],"_links":{"self":[{"href":"https:\/\/www.webcyou.com\/index.php?rest_route=\/wp\/v2\/posts\/3275","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webcyou.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webcyou.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webcyou.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webcyou.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3275"}],"version-history":[{"count":3,"href":"https:\/\/www.webcyou.com\/index.php?rest_route=\/wp\/v2\/posts\/3275\/revisions"}],"predecessor-version":[{"id":3277,"href":"https:\/\/www.webcyou.com\/index.php?rest_route=\/wp\/v2\/posts\/3275\/revisions\/3277"}],"wp:attachment":[{"href":"https:\/\/www.webcyou.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3275"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webcyou.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3275"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webcyou.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3275"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}