{"id":3314,"date":"2014-12-07T23:31:34","date_gmt":"2014-12-07T15:31:34","guid":{"rendered":"https:\/\/sdeno.com\/?p=3314"},"modified":"2019-03-24T14:39:50","modified_gmt":"2019-03-24T06:39:50","slug":"css3%e7%ac%94%e8%ae%b0","status":"publish","type":"post","link":"https:\/\/sdeno.com\/?p=3314","title":{"rendered":"css3\u7b14\u8bb0"},"content":{"rendered":"

-ms- \/* IE 9 *\/
\n-webkit- \/* Safari and Chrome *\/
\n-o- \/* Opera *\/
\n-moz- \/* Firefox *\/<\/p>\n

 <\/p>\n

CSS3 2D\u8f6c\u6362<\/span><\/p>\n

\/\/ transform\u591a\u5c5e\u6027\u5199\u6cd5\r\ntransform: translate(-960px, 0px) translateZ(0px);<\/pre>\n
transform: translate(50px,100px); \u79fb\u52a8\u4f4d\u7f6e\uff0cX\u8f7450 Y\u8f74100 \u00a0 \u00a0\u624b\u673a\u8bbe\u5907\u52a0\u901f\u6a21\u5f0f\uff1atransform: translate3d(0px, 0px, 0px);<\/p>\n
element.style.transform = 'translate3d(500px,0,0)';\r\nelement.style.OTransform = 'translate3d(500px,0,0)'; \/\/ Opera\r\nelement.style.msTransform = 'translate3d(500px,0,0)'; \/\/ IE 9\r\nelement.style.MozTransform = 'translate3d(500px,0,0)'; \/\/ Firefox\r\nelement.style.WebkitTransform = 'translate3d(500px,0,0)'; \/\/ Safari and Chrome<\/pre>\n
transform: rotate(30deg); \u65cb\u8f6c\uff0c\u987a\u65f6\u948830\u5ea6<\/p>\n
transform: scale(2,4); \u62c9\u4f38\uff0c\u5bbd\u4e3a\u539f\u67652\u500d\uff0c\u9ad8\u4e3a\u539f\u67654\u500d<\/p>\n
transform: skew(30deg,20deg); \uff08\u89e3\u91ca\u62bd\u8c61\u76f4\u63a5\u53bb,CSS88\u770b\u6548\u679c\uff09<\/p>\n
transform:skew(30deg,10deg),\u56fe\u89e3<\/p>\n
<\/div>
<\/div><\/div><\/div>\"skew-x-y\"<\/figure><\/a>\n
transform:skewX(30deg) \u00a0\/\/\u5982\u679c\u53ea\u8bbe\u7f6eX\u8f74\u53ea\u80fd\u5728\u6c34\u5e73\u65b9\u5411\u5728\u6539\u53d8\u5f62\u72b6\uff0c\u5982\u56fe<\/p>\n
<\/div>
<\/div><\/div><\/div>\"skew-x\"<\/figure><\/a>\n
 <\/p>\n
transform:skewY\uff0810deg\uff09\u00a0\/\/\u5982\u679c\u53ea\u8bbe\u7f6eY\u8f74\u53ea\u80fd\u5728\u5782\u76f4\u65b9\u5411\u5728\u6539\u53d8\u5f62\u72b6\uff0c\u5982\u56fe<\/p>\n
<\/div>
<\/div><\/div><\/div>\"skew-y\"<\/figure><\/a>\n
 <\/p>\n
transform:matrix(); \u6b64\u5c5e\u6027\u90fd\u53ef\u4ee5\u4ee3\u66ff\u4ee5\u4e0a\u7684\u5c5e\u6027
\n\u4f38\u7f29\u4f8b\u5b50\uff1ahttp:\/\/www.zhangxinxu.com\/study\/201206\/css3-transform-matrix-scale.html
\n\u89d2\u5ea6\u65cb\u8f6c\uff1ahttp:\/\/www.zhangxinxu.com\/study\/201206\/css3-transform-matrix-rotate.html
\nskew\uff1ahttp:\/\/www.zhangxinxu.com\/study\/201206\/css3-transform-matrix-skew.html<\/p>\n
 <\/p>\n
transform-origin \u6539\u53d8\u4e2d\u5fc3\u70b9 http:\/\/www.w3school.com.cn\/cssref\/pr_transform-origin.asp<\/p>\n
-webkit-transform-style:preserve-3d\u8fd9\u4e2a\u5c5e\u6027\u544a\u8bc9\u6d4f\u89c8\u5668\uff0c\u6240\u6709transform\u53d8\u6362\u90fd\u662f\u57283D\u7a7a\u95f4\u4e2d\u7684\u53d8\u6362\uff0c\u800c\u4e0d\u662f\u57282D\u7a7a\u95f4\u4e2d\u3002<\/p>\n
transform-style \u5c5e\u6027\u89c4\u5b9a\u5982\u4f55\u5728 3D \u7a7a\u95f4\u4e2d\u5448\u73b0\u88ab\u5d4c\u5957\u7684\u5143\u7d20\u3002<\/p>\n
preserve-3d \u00a0\u5b50\u5143\u7d20\u5c06\u4fdd\u7559\u5176 3D \u4f4d\u7f6e\u3002<\/p>\n
\uff08\u4f8b\u5982\u8981\u505a\u51fa\u4e00\u4e2a3D\u4f8b\u5982\u6b63\u65b9\u5f62\u5c31\u9700\u8981\u8bbe\u7f6e\u8fd9\u4e2a\u5c5e\u6027\uff09<\/p>\n
——————————————————————–<\/p>\n
-webkit-
\n-moz-
\nCSS3 3D \u8f6c\u6362<\/span><\/p>\n
\u8981\u505a3D\u6548\u679c\u5c31\u9700\u8981\u628a\u67d0\u573a\u666f\u8bbe\u7f6e\u4e3a3D\u821e\u53f0<\/p>\n
\u5728\u67d0div\u4e2d\u8bbe\u7f6etransform-style: preserve-3d\u540e\u4f5c\u7528\u4e8e\u6b64div\u7684\u540e\u4ee3\u5143\u7d20\uff0c\u5728\u6b64div\u91cc\u9762\u7684\u5143\u7d20\u5c31\u80fd\u8bbe\u7f6e3D\u6548\u679c\u4e86\u3002<\/p>\n
transform-style: flat|preserve-3d; \r\ntransform-style: flat; \/\/ \u9ed8\u8ba4\uff0c\u5b50\u5143\u7d20\u5c06\u4e0d\u4fdd\u7559\u5176 3D \u4f4d\u7f6e \r\ntransform-style: preserve-3d; \/\/ \u5b50\u5143\u7d20\u5c06\u4fdd\u7559\u5176 3D \u4f4d\u7f6e\u3002<\/pre>\n
\u80fd\u8bbe\u7f6e3D\u5c5e\u6027\uff0c\u4e5f\u5c31\u662f\u5728\u4e8c\u7ef4\u7684\u57fa\u7840\u4e0a\u591a\u4e86Z\u5c5e\u6027\uff0c\u5982\uff1a<\/p>\n
\u4f4d\u79fb\uff1atransform:translateZ(10px);\r\n\u5408\u5e76\u4e3atransform:translate3d(x,y,z);\r\n--------------------------------------------\r\n\u7f29\u653e\uff1atransform:scaleZ(2);\r\ntransform:scale3d(number,number,number);\r\n--------------------------------------------\r\n\u65cb\u8f6c\uff1atransform:rotateZ(30deg);\r\ntransform:rotate3d(Xangle,Yangle,Zangle)\r\n\r\n\u53ef\u4ee5\u8fd9\u4e48\u5199\uff1atransform: translate3d(-50%, -140.716px, 1px) scale3d(1.108, 1.108, 1);<\/pre>\n
 <\/p>\n
transform: rotateX(120deg); \u56f4\u7ed5X\u8f74\u65cb\u8f6c 120\u5ea6<\/p>\n
transform: rotateY(130deg);
\n——————————————————————–<\/p>\n
 <\/p>\n
 <\/p>\n
-moz-
\n-webkit-
\n-o-<\/p>\n
CSS3\u52a8\u753b<\/span>\u5c5e\u6027\u6709\u4e24\u4e2a<\/p>\n
transition \u76f8\u5f53\u4e8e\u8865\u95f4\u52a8\u753b<\/p>\n
animation \u76f8\u5f53\u4e8e\u5173\u952e\u5e27\u52a8\u753b<\/p>\n
Transform-style\u548cPerspective\u5c5e\u6027<\/a><\/p>\n
\u521b\u5efa3D CSS3\u573a\u666f\u5b83\u662f\u6700\u5916\u5c42\u7684div\uff0c\u7528\u6765\u63d0\u4f9b\u4e00\u4e2a3D\u573a\u666f\uff0c
\n\u53ef\u4ee5\u8ba4\u4e3a\u5b83\u662f\u4e00\u4e2a3D\u56fe\u5f62\u7684\u5c55\u793a\u5e73\u53f0\uff0c\u53ea\u6709\u5b9a\u4e49\u4e86\u8fd9\u6837\u4e00\u4e2adiv\uff0c\u624d\u80fd\u591f\u5c55\u793a3D\u56fe\u5f62\u3002<\/p>\n
\u4e3a\u4ec0\u4e48\u8981\u521b\u5efa3D\u573a\u666f\u5462\uff1f
\n\u56e0\u4e3a\u6d4f\u89c8\u5668\u672c\u8eab\u9ed8\u8ba4\u5c31\u662f2D\u7684\u573a\u666f\uff0c\u5982\u679c\u53ea\u662f\u60f3\u5b9e\u73b02D\u6548\u679c\u5c31\u4e0d\u9700\u8981\u521b\u5efa2D\u573a\u666f\u4e86\uff0c
\n3D\u5c31\u5fc5\u987b\u8981\u521b\u5efa\u4e86\u3002<\/p>\n
\u521b\u5efa3D\u573a\u666f\u5982\u4e0b\uff1a<\/p>\n
-webkit-perspective:800px; \/\/\u7269\u4f53\u79bb\u7535\u8111\u6709800\u50cf\u7d20\u8ddd\u79bb\uff0c\u4f5c\u7528\u4e8e\u5143\u7d20\u7684\u540e\u4ee3\uff0c\u800c\u4e0d\u662f\u5176\u5143\u7d20\u672c\u8eab\u3002
\n-WebKit-perspective-origin: 50% 50%; \/\/\u89c6\u70b9\uff0c\u7269\u4f53\u57283D\u573a\u666f\u4e2d\u95f4<\/p>\n
<\/div>
<\/div><\/div><\/div>\"3DC\"<\/figure><\/a>\n
\u57283D\u7684\u4e16\u754c\u91cc\u6211\u4eec\u9700\u8981\u628a\u5750\u6807\u641e\u6e05\u695a\u3002
\n\u57283D\u4e16\u754c\u4e2dX\u8f74\u5c31\u662f\u5c4f\u5e55\u9876\u90e8\uff0cY\u8f74\u5c31\u662f\u5c4f\u5e55\u5de6\u8fb9\uff0c\u4f46\u662f\u4f1a\u591a\u51fa\u4e00\u4e2aZ\u8f74\uff0cZ\u8f74\u65b9\u5411\u5c31\u662f\u6307\u5411\u6211\u4eec\u3002<\/p>\n
<\/div>
<\/div><\/div><\/div>\"3D_transform\"<\/figure><\/a>\n
\u603b\u7ed3<\/span>\uff1a\u60f3\u8ba9\u5143\u7d20\u67093D\u7acb\u4f53\u6548\u679c\u5c31\u9700\u8981\u4e00\u4e2a3D\u821e\u53f0\uff0c\u8fd8\u9700\u8981\u5143\u7d20\u80fd\u8bbe\u7f6e3D\u5c5e\u6027\u5982\uff1a<\/p>\n
-webkit-perspective:800px; \/\/\u8bbe\u7f6e\u666f\u6df1\u7684\u6548\u679c<\/span>\r\n-webKit-perspective-origin: 50% 50%; \/\/\u89c6\u70b9\uff0c\u7269\u4f53\u57283D\u573a\u666f\u4e2d\u95f4\r\n-webkit-transform-style:preserve-3d; \/\/\u8ba9\u5143\u7d20\u8bbe\u7f6e3D\u5c5e\u6027\uff0cz\u503c<\/pre>\n
 <\/p>\n
 <\/p>\n
CSS3\u8fc7\u6e21<\/span><\/p>\n
\u6ce8\u610f\uff1a\u8981\u4f7f\u7528transition\u5c5e\u6027\u65f6\uff0c\u4e0d\u8981\u7528style\u5728\u5f53\u524d\u5143\u7d20\u4e0a\u5199\u6837\u5f0f\uff0c\u4e00\u822c\u548c\u6837\u5f0f\u7684hover\u4f2a\u7c7b\u914d\u5408\u3002<\/p>\n
transition: width 2s linear 8s, height 2s linear 8s, transform 2s linear 8s;
\n\u5bbd\u5ea6\u8fc7\u6e21\u65f6\u95f42\u79d2\u5185\u5b8c\u6210\u63a8\u8fdf8\u79d2\u540e\u6267\u884c\uff0c\u9ad8\u5ea62\u79d2\u5185\u5b8c\u6210\u63a8\u8fdf8\u79d2\u540e\u6267\u884c \uff0c2D\u8fc7\u6e212\u79d2\u5185\u5b8c\u6210\u63a8\u8fdf8\u79d2\u540e\u6267\u884c<\/p>\n
transition-property: none|all|property; \u00a0 \u00a0 \/\/\u8981\u8fc7\u5ea6\u7684\u5c5e\u6027<\/p>\n
transition-duration: time; \u00a0 \/\/\u8fc7\u5ea6\u5f00\u59cb\u5230\u7ed3\u675f\u8981\u7684\u65f6\u95f4<\/p>\n
transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n); \u00a0 \u00a0\/\/\u8fc7\u5ea6\u901f\u5ea6\u00a0 \uff0c\u52a8\u753b\u79bb\u7ebf\u5305 \uff1acubic-bezier.com<\/a>\u00a0 \u00a0 \u52a8\u753b\u8bbe\u7f6e\uff1ahttp:\/\/cubic-bezier.com\/#.17,.67,.83,.67<\/a><\/p>\n
transition-delay: time; \u00a0\/\/\u51e0\u79d2\u540e\u5f00\u59cb\u8fc7\u5ea6<\/p>\n
 <\/p>\n
transition\u6848\u4f8b\uff1atransition_demo<\/a><\/p>\n
——————————————————————–<\/p>\n
-moz-
\n-webkit-
\n-o-<\/p>\n
css3\u52a8\u753b<\/span><\/p>\n
animation:myfirst 5s linear 2s infinite alternate; \u8c03\u7528\u52a8\u753b\u51fd\u6570myfirst,5\u79d2\u5185\u6267\u884c\u5b8c\u6b64\u52a8\u753b\uff1b\u63a8\u8fdf2\u79d2\u6267\u884c\uff1b\u5012\u5e8f\u6267\u884c<\/p>\n
 <\/p>\n
@keyframes myfirst \u8bbe\u5b9a\u52a8\u753b\u51fd\u6570 \uff0c\u5c06\u65f6\u95f4\u5206\u4e3a4\u7b49\u5206 0~25%\uff0c25%~50%,50%~70%,70%~100%\uff0c\u5206\u522b\u5728\u4e0d\u540c\u65f6\u95f4\u6bb5\u5185\u7684\u8fc7\u6e21\u6548\u679c
\n{
\n0% {background:red; left:0px; top:0px;} 0\u79d2\u65f6
\n25% {background:yellow; left:200px; top:0px;}
\n50% {background:blue; left:200px; top:200px;}
\n75% {background:green; left:0px; top:200px;}
\n100% {background:red; left:0px; top:0px;}
\n}<\/p>\n
 <\/p>\n
animation \u5c5e\u6027\u662f\u4e00\u4e2a\u7b80\u5199\u5c5e\u6027\uff0c\u7528\u4e8e\u8bbe\u7f6e\u516d\u4e2a\u52a8\u753b\u5c5e\u6027\uff1a
\nanimation-name \u00a0 \/\/\u52a8\u753b\u540d\u79f0
\nanimation-duration \/\/\u52a8\u753b\u5f00\u59cb\u5230\u7ed3\u675f\u9700\u8981\u65f6\u95f4
\nanimation-timing-function \u00a0\/\/\u52a8\u753b\u52a0\u901f\u5ea6\u72b6\u6001
\nanimation-delay \u00a0 \/\/\u51e0\u79d2\u540e\u5f00\u59cb\u52a8\u753b
\nanimation-iteration-count \u00a0\/\/\u52a8\u753b\u64ad\u653e\u6b21\u6570
\nanimation-direction \/\/\u52a8\u753b\u662f\u5426\u8981\u9006\u5411\u64ad\u653e\u56de\u53bb<\/p>\n
animation-fill-mode \u00a0\/\/\u8bbe\u7f6e\uff0c\u52a8\u753b\u6267\u884c\u5b8c\u6210\u540e\u4fdd\u6301\u5728\u6267\u884c\u524d\u72b6\u6001\u8fd8\u662f\u4e4b\u540e\u72b6\u6001\uff0c\u6848\u4f8b<\/a>
\nnone\uff1a
\n\u9ed8\u8ba4\u503c\u3002\u4e0d\u8bbe\u7f6e\u5bf9\u8c61\u52a8\u753b\u4e4b\u5916\u7684\u72b6\u6001
\nforwards\uff1a
\n\u8bbe\u7f6e\u5bf9\u8c61\u72b6\u6001\u4e3a\u52a8\u753b\u7ed3\u675f\u65f6\u7684\u72b6\u6001
\nbackwards\uff1a
\n\u8bbe\u7f6e\u5bf9\u8c61\u72b6\u6001\u4e3a\u52a8\u753b\u5f00\u59cb\u65f6\u7684\u72b6\u6001
\nboth\uff1a
\n\u8bbe\u7f6e\u5bf9\u8c61\u72b6\u6001\u4e3a\u52a8\u753b\u7ed3\u675f\u6216\u5f00\u59cb\u7684\u72b6\u6001
\n\u300acss animation\u7684\u76d1\u542c\u4e8b\u4ef6<\/a>\u300b<\/p>\n
\u5236\u4f5c3D\u7acb\u4f53\u6548\u679c\uff1ahttp:\/\/www.jb51.net\/css\/455565.html<\/a><\/p>\n
 <\/p>\n
 <\/p>\n
-ms- \/* IE 9 *\/ -webkit- \/* Safari and Chrome *\/ -o- \/* […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[27,11],"tags":[],"class_list":["post-3314","post","type-post","status-publish","format-standard","hentry","category-css3","category-11"],"_links":{"self":[{"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/posts\/3314","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sdeno.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3314"}],"version-history":[{"count":0,"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/posts\/3314\/revisions"}],"wp:attachment":[{"href":"https:\/\/sdeno.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3314"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sdeno.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3314"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sdeno.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3314"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}