css 3の3 d
27700 ワード
友達のブログ園css 3の3 d教程を見て、自分も彼の教程を少し練習してすでにとても詳しいですhttp://www.cnblogs.com/duanhuajian/archive/2012/08/30/2664026.html
ここではコードに私がコードを書いたときだけ感じます(Googleブラウザのみ)
これは私が書いた効果図です.
下にはコードがあります.
------------------------------------------------------------------------------------------------------------
コード10行目:-webkit-transform-style:preserve-3 d;
このコマンドは、このdivの下のサブエレメントに3 d効果を持たせるものです.もちろん、このコマンドのdivの下のサブエレメントにはpositon:absolute+transform:rotateX/Y/Z()を使用します.ねじると、これらのサブエレメントは3 d効果を持っていることがわかります(もちろん、現実効果を見る必要がある人は3 d立体図の概念があります).
コード15行目:-webkit-perspective:1700 px;
3 dをする過程であなたが見ているこのdivの角度を調整して、あなたの各ブロックがどのように箱をねじるべきかを調整する必要があります.このコマンドはあなたがこの箱を見ているのは遠近で距離を設定します.つまり、あなたの箱を拡大したいなら、この距離の値を小さくすることができます.遠近で見たいなら、この距離の値を大きくすることができます.とにかく近远ですもちろんこれはやっている时にコマンドが役に立つので游んでからログアウトできますもちろん拡大缩小の効果をしたいならcss属性の値を変更してページのインタラクティブさを増やすことができます
コード17行目:-webkit-perspective-origin:-700 px 50 px;
もちろん3 dの過程で遠近距離を調整するだけでなく角度を調整する必要があります特にopacityが設定されていないときにブロックのねじれ度をどう見るかを変更するには、このコマンドが必要です.このコマンドの第1値はx軸回転の第2値はy軸の回転です.つまり、第1値は水平回転の第2値は垂直回転です.ページが書き終わったらログアウトできます.
コード19行目:-webkit-animation:aaa 10 s ease infinite;
css 3が持つアニメーション効果animationです.ここでは説明しません.アニメーション効果を設定するときにtransform-style:preserve-3 dが設定されていることに注意してください.このcss属性のdivの効果はもちろん欲しい効果が得られない場合はdivにborderを付けてtransform-originで原点を設定する必要があります(原点はこの点で動くという意味です)このときdivの動き方は設定された原点をもとに動き想像としてこの原点を通して欲しい動き方を変更することが見られますつまりtransform:rotateX/Y/Z()度数を変えて欲しい効果を作ることが理解できなければ友人ブログ園の3 dチュートリアルを見ることができます(ここではコード解析のみ)
ここではコードに私がコードを書いたときだけ感じます(Googleブラウザのみ)
これは私が書いた効果図です.
下にはコードがあります.
1 <!DOCTYPE HTML>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title> New Document </title>
6 <meta name="Keywords" content="">
7 <meta name="Description" content="">
8 <style type="text/css">
9 #divd{
10 -webkit-transform-style:preserve-3d;
11 /*3d ， 3d */
12 width: 200px;height: 200px;
13 /*border: 5px solid red;*/
14 margin: 300px auto;
15 /*-webkit-perspective:1700px;*/
16 /* */
17 /*-webkit-perspective-origin:-700px 50px;*/
18 /* 3d */
19 -webkit-animation: aaa 10s ease infinite;
20 position: relative;
21 }
22 @-webkit-keyframes aaa {
23 0%{
24 -webkit-transform-origin:left bottom;
25 -webkit-transform: rotateY(0deg) rotateX(45deg) rotateZ(-45deg);}
26 100%{
27 -webkit-transform-origin: left bottom;
28 -webkit-transform: rotateY(360deg) rotateX(45deg) rotateZ(-45deg);
29 }
30 }
31 #div1{
32 background: #FC7405;opacity: 0.5;
33 width: 200px;height:200px;
34 -webkit-transform-origin: center top;
35 -webkit-transform:rotateX(90deg);
36 position: absolute;
37
38 }
39 #div2{
40 background: green;opacity: 0.5;
41 width: 200px;height: 200px;
42 -webkit-transform: translateZ(200px);
43 /* z */
44 position: absolute;
45 }
46 #div3{
47 width: 200px;height: 200px;opacity: 0.5;
48 background: #079EFC;
49 position: absolute;
50 -webkit-transform-origin:center bottom;
51 -webkit-transform: rotateX(-90deg);
52 }
53 #div4{
54 width: 200px;height: 200px;opacity: 0.5;
55 background: yellow;
56 -webkit-transform-origin:right center ;
57 -webkit-transform: rotateY(90deg);
58 position: absolute;
59 }
60 #div5{
61 width: 200px;height: 200px;opacity: 0.5;
62 background: #F707D3;
63 -webkit-transform-origin:left center ;
64 -webkit-transform: rotateY(-90deg);
65 position: absolute;
66 }
67 #div6{
68 width: 200px;height: 200px;opacity: 0.5;
69 background: #7707F7;
70 position: absolute;
71 }
72 </style>
73 </head>
74
75 <body>
76 <div id="divd">
77 <div id="div1"></div>
78 <div id="div2"></div>
79 <div id="div3"></div>
80 <div id="div4"></div>
81 <div id="div5"></div>
82 <div id="div6"></div>
83
84 </div>
85 </body>
86 <script type="text/javascript">
87
88 </script>
89 </html>------------------------------------------------------------------------------------------------------------
コード10行目:-webkit-transform-style:preserve-3 d;
このコマンドは、このdivの下のサブエレメントに3 d効果を持たせるものです.もちろん、このコマンドのdivの下のサブエレメントにはpositon:absolute+transform:rotateX/Y/Z()を使用します.ねじると、これらのサブエレメントは3 d効果を持っていることがわかります(もちろん、現実効果を見る必要がある人は3 d立体図の概念があります).
コード15行目:-webkit-perspective:1700 px;
3 dをする過程であなたが見ているこのdivの角度を調整して、あなたの各ブロックがどのように箱をねじるべきかを調整する必要があります.このコマンドはあなたがこの箱を見ているのは遠近で距離を設定します.つまり、あなたの箱を拡大したいなら、この距離の値を小さくすることができます.遠近で見たいなら、この距離の値を大きくすることができます.とにかく近远ですもちろんこれはやっている时にコマンドが役に立つので游んでからログアウトできますもちろん拡大缩小の効果をしたいならcss属性の値を変更してページのインタラクティブさを増やすことができます
コード17行目:-webkit-perspective-origin:-700 px 50 px;
もちろん3 dの過程で遠近距離を調整するだけでなく角度を調整する必要があります特にopacityが設定されていないときにブロックのねじれ度をどう見るかを変更するには、このコマンドが必要です.このコマンドの第1値はx軸回転の第2値はy軸の回転です.つまり、第1値は水平回転の第2値は垂直回転です.ページが書き終わったらログアウトできます.
コード19行目:-webkit-animation:aaa 10 s ease infinite;
css 3が持つアニメーション効果animationです.ここでは説明しません.アニメーション効果を設定するときにtransform-style:preserve-3 dが設定されていることに注意してください.このcss属性のdivの効果はもちろん欲しい効果が得られない場合はdivにborderを付けてtransform-originで原点を設定する必要があります(原点はこの点で動くという意味です)このときdivの動き方は設定された原点をもとに動き想像としてこの原点を通して欲しい動き方を変更することが見られますつまりtransform:rotateX/Y/Z()度数を変えて欲しい効果を作ることが理解できなければ友人ブログ園の3 dチュートリアルを見ることができます(ここではコード解析のみ)