css中transform的使用

html-css034

css中transform的使用,第1张

1.对于行内元素是无效的

2.会保留原来的位置,提高盒子的层级 与relative相对定位类似

transform: translate(X,Y)

1.填入具体数值,例如 translate(10px,10px) ,需要填写单位,元素将会向右位移10px,向下位移10px

其中如果数值为负数,则位移的方向相反

2.填入百分比数字,例如 translate(10%,10%) ,元素将会向右位移 自身元素 的width 10%距离和向下位移 自身元素 的height 10%距离

transform: rotate(X)

需要在X位置填写相对应的旋转角度,并带上单位deg,例子: rotate(90deg)

元素将会默认在自身的垂直水平居中点进行旋转对应的X度

transform-origin: X Y

可以通过改变元素的该属性,导致元素旋转的原点进行改变

1.填入的X Y值为方位名词,例如top\bottom\left\right

例子: transform-origin: left top 元素将在元素的左上角为原点进行旋转运动

transform: scale(X)

可以通过改变元素的该属性,导致元素进行X倍的缩放X为负数时将会产生镜面效果

例子: transform: scale(1.2) 元素将变为原来的1.2倍.

transform连写,如果有发生平移,都需要先写平移属性

例子 transform: translateX(300%) rotate(360deg)

可以在发生transform的元素中设置transition属性

例子: transition: 1s 代表触发元素发生变化后,变化将于1s内完成

如果想要使用CSS绘制胡子样式，这要怎么画？下面本篇文章就来给大家介绍一下使用CSS绘制胡子效果的方法，希望对大家有所帮助。

绘制胡子的步骤：

步骤1： 创建一个黑色圆，圆角半径为50％，宽度和高度为180px

为了保持圆在中间，在左边加350px；为了要使圆可见，可添加背景色作为当前颜色。使用CurrentColor值的好处是更改颜色徽标，以便自动更改背景。

效果图：

步骤2： 使用box-shadow添加框阴影，使页面中间有两个圆

css样式

效果图：

步骤3： 使用::before元素添加左胡须

●　将::before元素添加到div，并添加position， top，width， height， border。

●　同时添加border-radius属性，直到弧线需要形成胡须。

●　固定旋转原点，使左胡须末端准确到达，然后以-40度角旋转。

添加.mustache::before样式

效果图：

步骤4： 使用::after元素添加右胡须

●　将::after元素添加到div，并添加position， top，width， height， border。

●　同时添加border-radius属性，直到弧线需要形成胡须。

●　固定旋转原点，使右胡须末端准确到达，然后以40度角旋转。

添加.mustache::after样式

效果图：

更多 web开发 知识，请查阅 HTML中文网 ！！

-webkit-transform-origin: center bottom

transform-origin: center bottom

transform-origin：[ <percentage>| <length>| left | center① | right

] [ <percentage>| <length>| top | center② | bottom

]?

默认值：50% 50%，效果等同于center

center

适用于：所有块级元素及某些内联元素

继承性：无

取值：

<percentage>：

用百分比指定坐标值。可以为负值。

<length>：

用长度值指定坐标值。可以为负值。

left：

指定原点的横坐标为left

center①：

指定原点的横坐标为center

right：

指定原点的横坐标为right

top：

指定原点的纵坐标为top

center②：

指定原点的纵坐标为center

bottom：

指定原点的纵坐标为bottom

说明：

设置或检索对象以某个原点进行转换。

该属性提供2个参数值。

如果提供两个，第一个用于横坐标，第二个用于纵坐标。

如果只提供一个，该值将用于横坐标；纵坐标将默认为50%。

对应的脚本特性为transformOrigin。