零基础建站培训介绍

当前位置:

CSS3中的transform 变形功能 rotate() / skew() / scale() / translate(,)

transform 属性
transform的含义是:改变,使…变形;转换

transform的属性包括:rotate() / skew() / scale() / translate(,) ,分别还有x、y之分,比如:rotatex() 和 rotatey() ,以此类推。

transform:rotate():旋转
其中“deg”是“度”的意思,如“10deg”表示“10度”下同。


.demo_transform1{-webkit-transform:rotate(10deg);-moz-transform:rotate(10deg)}

 

transform:skew():倾斜

7


.demo_transform2{-webkit-transform:skew(20deg);-moz-transform:skew(20deg)}

transform:scale():缩放

“1.5”表示以1.5的比例放大,如果要放大2倍,须写成“2.0”,缩小则为负“-”。


.demo_transform3{-webkit-transform:scale(1.5);-moz-transform:scale(1.5)}

transform:translate():变动 位移

如下表示向右位移120像素,如果向上位移,把后面的“0”改个值就行,向左向下位移则为负“-”。


.demo_transform4{-webkit-transform:translate(120px,0);-moz-transform:translate(120px,0)}
上一课: 下一课:

发表评论

电子邮件地址不会被公开。 必填项已用*标注

相关教程

  • 什么是css3-gird布局格式 (140565 次学习)
    CSS3-Gird布局格式css3-gird布局格式应用很广泛,最简单的例子就是内容的分栏显示。对于布局复杂的三栏网页来说,如果使用CSS3Grid布局的话,我们只
  • Animate动画名称大全 (146041 次学习)
    animate.css 是一个来自国外的 CSS3 动画库,它预设了抖动(shake)、闪烁(flash)、弹跳(bounce)、翻转(flip)、旋转(rotateIn/rotateOut)、淡
  • 代码介绍:一款CSS3设计的绿色扁平化简洁清爽风格鼠标悬停动画切换网站导航菜单代码特效。代码适用:适用浏览器:360、FireFox、Chrome、Safari、
  • Css样式的float浮动属性,用于设置标签对象(如:<div>标签盒子、<span>标签、<a>标签、<em>标签等html标签)的浮动布局,浮
  • display:box;box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构、css实现的布局方式。经典的一个布局应用就是布局的垂直等高、
  • Part I 这种选择器的共同特征:指定的样式只有当元素处于某种状态时才起作用,在默认状态下不起作用CSS3中共有11种UI元素状态伪类选择器:E:hover 
  • border-radius:圆角边框CSS3圆角只需设置一个属性:border-radius(含义是"边框半径")。你为这个属性提供一个值,就能同时设置四个圆角的半径。所有
  • 对于做网站来说,很头疼的问题就是网站做好后,不同浏览器出现不兼容的情况。主要原因就是由于不同浏览器对某些标签的属性初始值【margin,padding,fon
  • 新增背景属性background-clipbackground-originbackground-sizeCSS常用背景属性background-repeatbackground-image边框样式border
  • 有时候,我们需要对网页某个区域的文字竖排,竖向排列。横向排列,在网站制作培训中,经常用到。对于竖排,一时间找不到思路了,呵呵,其实和横排一样