[css]我要用css画幅画(三)

概述接着之前的[css]我要用css画幅画(二)， 今天，我画了一个小人，他的名字暂时叫作小明。 以下只列出本次修改增加的内容 html如下： 1 <div class="human le

接着之前的[css]我要用css画幅画(二)， 今天，我画了一个小人，他的名字暂时叫作小明。

 

以下只列出本次修改增加的内容 

HTML如下：

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

human

 

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 18     top: -20px;19  220px;20     display: block;21 }22 23 .human-head-normal {24     border: 2px solID #000;25  40px;26 27     border-radius: 50%;28 29  20px;30  35px;31 }32 .human-body-normal {33  60px;34  3px;35     background: #000;36  55px;37  62px;38 39 }40 41 .human-arms-normal {42  80px;43 44 45 46  18px;47  75px;48 }49 50 .human-legs-normal {51 50px;52  50px;53  3px solID #000;54     border-bottom: none;55     border-right:56 57 58 59 60     -webkit-transform: rotate(45deg);61     -webkit-transform-origin: 1px 1px;62 }

human.CSS

 

下面是code pen中的效果：  Sun-house-human

或者你可以直接看github上的demo效果： http://bee0060.github.io/Css-Paint/pages/sun-house/sun-house-3.html

代码已经上传github：https://github.com/bee0060/Css-Paint 

 

 这里用到了以下这个陌生的CSS：

-webkit-transform-origin: 1px 1px;

 

之前两篇有用到transform，也对transform-origin做了一些猜测，但是并没有亲身试验过。这次终于实际用到了。

 

transform-origin属性用于设置变形的原点，变形将会基于原点进行。

相关的MDN文档： https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform-origin

该属性的默认值是:

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

也就是对象的重心位置。

 

第一个参数描述原点在对象上的横向位移(下文简称x)， 第二个参数是纵向位移(下文简称y)，第三个参数还不太理解，应该是垂直偏移值（即立体几何中的z轴坐标），文档上的原话是：定义变形中心距离用户视线（z=0处）的<length>（不能是<percentage>）偏移值。

 

前两个参数均接受以下类型的值：

1. 长度，即上面说的<length>,如1px、1em、1pt等， 但是不接受仅用数字作为值， 如1。

2. 百分比，即上面说的<percentage>， 如50%。

3. 位置描述符， 包括left、right、top、bottom和center。

　　其中x可以使用left、right和center， y可以使用top、bottom和center。

　　当x和y都使用位置描述符，参数位置可以不按顺序，即以下两种都是允许的：

　　　　-webkit-transform-origin: left top;

　　　　-webkit-transform-origin: top left;

　　浏览器会自动识别出x和y的对应描述符。但若不是两个参数都使用位置描述符时， 就需要严格按照x和y的位置， 且位置描述符不可以出现矛盾的情况，如以下几种写法都会被认为是无效的：

　　　　-webkit-transform-origin: top 2px;

　　　　-webkit-transform-origin: left right;

 

　　为了避免不必要的麻烦， 建议还是严格按照参数的位置进行书写比较好。

 

从上面的例子中，可以看出，前两个参数允许接受不同类型的值，如一个用位置描述符另一个用百分比。

另外，transform-origin属性设置1-3个参数都是可以的。

 

今天就到这，谢谢观看。 如有错误，欢迎指正。

 

PS： 我画完小人后，和老婆说这幅画算是画完了，但她说，她小时候画这种画，至少还要有云啊、大树啊、栏杆啊……。 对于这种“需求”，我只能说一句：“臣妾做不到啊！” 云和大树，光想想都觉得超出我的能力范围了。 现在就只画个小人吧。

 

下一篇：[css]我要用css画幅画(四)

 

总结

以上是内存溢出为你收集整理的[css]我要用css画幅画(三)全部内容，希望文章能够帮你解决[css]我要用css画幅画(三)所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。