transform(变形)和transform-origin(变形原点)的说明：

目前这两个属性获取了除去ie以外各个干流阅读器webkit，firefox，opera的支持，属性名区分为

-webkit-transform，-moz-transform，-o-transform;

<strong>1、扭转元素基点transform-origin

其中left,centerright是水平方向取值，对应的百分值为left=0%;center=50%;right=100%

而

topcenterbottom是垂直方向的取值，其中top=0%;center=50%;bottom=100%;

假设只取一个值，示意垂直方向值不变。

注：

transform-origin并不是transform中的属性值，他具备自己的语法。

然而他要联合transform能力起作用。

例子：

初始态：

.heart{position:relative;width:100px;height:80px;background:blue;}

.heart:before{position:absolute;content:;left:50px;top:0;width:50px;height:80px;background:red;border-radius:50px50px00;}

取基点为左下角，逆时针转45deg

.heart{position:relative;width:100px;height:80px;background:blue;}

.heart:before{position:absolute;content:;left:50px;top:0;width:50px;height:80px;background:red;border-radius:50px50px00;-webkit-transform:rotate(-45deg);-webkit-transform-origin:0100%;}

取右下角为基点旋转：

.heart{position:relative;width:100px;height:80px;background:blue;}

.heart:before{position:absolute;content:;left:50px;top:0;width:50px;height:80px;background:red;border-radius:50px50px00;-webkit-transform:rotate(-45deg);-webkit-transform-origin:0100%;}

.heart:after{position:absolute;content:;left:0px;top:0;width:50px;height:80px;background:yellow;border-radius:50px50px00;-webkit-transform:rotate(45deg);-webkit-transform-origin:100%100%;}

最后兼并代码并将黄色改为白色一致：

.heart:before,.heart:after{position:absolute;content:;top:0;width:50px;height:80px;background:red;border-radius:50px50px00;}

.heart:before{left:50px;-webkit-transform:rotate(-45deg);-webkit-transform-origin:0100%;}.heart:after{left:0;-webkit-transform:rotate(45deg);-webkit-transform-origin:100%100%;}

2、transform

标签： 网站制造、 origin、 CSS3、 厦门网页设计、 厦门网站设计、 transform、 网站制造、 厦门网站树立公司、 网站设计、 厦门网站提升、 网站开发、 变形、 HTML5、 网站设计、 变形原点、 网站树立、 厦门网站树立、 网站树立、 和transform、 网站树立报价、

本文地址： https://yihaiquanyi.com/article/ca9da8ea118eb5e6187a.html

上一篇：照应的形式及作用照应式设计网站树立网站设...
下一篇：树立网站整体形象的关键是网站树立网站树立...