【css】cssで絵を描きたい(3)_html/css_WEB-ITnose

前回の【css】cssで絵を描いてみたい(2) 今日は小男を描きました、名前は仮にシャオミンといいます。

この修正によって追加された内容のみを以下に示します

htmlは次のとおりです:

1 <div class="human left-190 bottom-25">2         <p class="lines">大家好，我叫小明</p>3         <div class="human-head-normal"></div>4         <div class="human-body-normal"></div>5         <div class="human-arms-normal"></div>6         <div class="human-legs-normal"></div>7     </div>

cssは次のとおりです:

 1 .left-190 { 2     left: 190px; 3 } 4  5 .bottom-25 { 6     bottom: 25px; 7 } 8  9 .human {10     height:170px;11     width: 120px;12 13     position: absolute;14 }15 16 .lines {17     position: absolute;18     top: -20px;19     width: 220px;20     display: block;21 }22 23 .human-head-normal {24     border: 2px solid #000;25     height: 40px;26     width: 40px;27     border-radius: 50%;28     position: absolute;29     top: 20px;30     left: 35px;31 }32 .human-body-normal {33     height: 60px;34     width: 3px;35     background: #000;36     left: 55px;37     top: 62px;38     position: absolute;39 }40 41 .human-arms-normal {42     width: 80px;43     height: 3px;44     position: absolute;45     background: #000;46     left: 18px;47     top: 75px;48 }49 50 .human-legs-normal {51     height:50px;52     width: 50px;53     border: 3px solid #000;54     border-bottom: none;55     border-right: none;56     position: absolute;57     left: 55px;58     top: 120px;59 60     -webkit-transform: rotate(45deg);61     -webkit-transform-origin: 1px 1px;62 }

以下の効果です。コード ペン: Sun-house-human

または、Github でデモの効果を直接確認できます: http://bee0060.github.io/Css-Paint/pages/sun-house-3.html

コードにはgithub にアップロードされました: https://github.com/bee0060/Css-Paint

ここでは次の見慣れない CSS が使用されています:

-webkit-transform-origin: 1px 1px; 前の 2 つの記事これは、transform に役立ち、transform-origin にも役立ちました。いくつかの推測はしましたが、自分ではテストしていません。今回、ついに実用化されました。

transform-origin 属性は、変換の原点を設定するために使用され、変換は原点に基づきます。

関連する MDN ドキュメント: https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform-origin

この属性のデフォルト値は次のとおりです:

-webkit-transform-origin: 50% 50% 0;

つまり、物体の重心です。

最初のパラメータはオブジェクト上の原点の横方向の変位 (以下、x と呼びます) を表し、2 番目のパラメータは縦方向の変位 (以下、y と呼びます) であり、3 番目のパラメータはよく理解されていません。垂直オフセット値 (つまり、ソリッド ジオメトリの Z 軸座標) は次のとおりです。 変形中心からユーザーのオフセット値を ( にすることはできません) を定義します。視線 (z=0)。

最初の 2 つのパラメータはどちらも次のタイプの値を受け入れます:

1. 長さ、つまり 1px、1em、1pt などの前述の ですが、値としては数値のみを受け入れます。 1などは受け付けません。

2. パーセンテージ、つまり、前述の など。

3. 左、右、上、下、中央を含む位置記述子。

ここで、x は left、right、center を使用でき、y は top、bottom、center を使用できます。

x と y の両方が位置記述子を使用する場合、パラメーターの位置は順序が狂うことがあります。つまり、次の 2 つが許可されます:

-webkit-transform-origin: left top;

-webkit-transform-origin:左上;

ブラウザは、x と y の対応する記述子を自動的に認識します。ただし、両方のパラメータに位置記述子が使用されていない場合、x と y の位置は厳密に従う必要があり、位置記述子が矛盾することはできません。たとえば、次のような記述方法は無効とみなされます:

-webkit -transform-。 origin:top 2px;

-webkit-transform-origin: left right;

無用なトラブルを避けるため、パラメータの位置に厳密に従って記述することをお勧めします。

上の例から、最初の 2 つのパラメータでは、位置記述子を使用するものとパーセンテージを使用するものなど、さまざまなタイプの値を受け入れることができることがわかります。

また、transform-origin 属性には 1 ～ 3 個のパラメータを設定するだけで大​​丈夫です。

今日はここまでです、ご覧いただきありがとうございます。 間違いがある場合は修正してください。

PS-1: 当初、transform-origin 属性の記述は個人的な推測に基づいて記述していましたが、ドキュメントを確認したところ、完全に間違っていたことがわかり、書き直さざるを得ませんでした。誤解を招くことを避けるため。

追記-2: 小さな男の絵を描き終わった後、妻に絵が完成したと話しましたが、子供の頃は雲、大きな木、手すりくらいは描かなければならなかったと言っていました... この「必要性」については、「私には無理です！」としか言いようがありません。ユン・ヘダシュは、考えただけでも、私の能力を超えていると感じます。 では、小さな人物を描いてみましょう。将来的に他に何を追加するかは、純粋にインスピレーションと興味次第です。