CSS之Transform_html/css_WEB-ITnose-html教程-PHP中文网

首页

web前端

html教程

CSS之Transform_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 21, 2016 am 08:47 AM

我们利用css3中的transform可以实现文字或图像的旋转、缩放、倾斜和移动四种类型的变形处理。

本文使用的是标准的transform，亦可以使用各个浏览器对应私有的属性。对应如下

-webkit-transform
-moz-transform
-o-transform

不过在我的电脑上用transform效果相同，Chrome 49 Firefox 46 IE 10

一、旋转(rotate)

<!doctype html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <style>        img:hover{            transform: rotate(90deg);        }    </style></head><body>    <img  src="/static/imghw/default1.png"  data-src="http://dl.bizhi.sogou.com/images/2012/03/23/107607.jpg?f=download"  class="lazy" alt="CSS之Transform_html/css_WEB-ITnose" ></body></html>

登录后复制

语法格式如下：

rotate(angle)

旋转角度单位有：

deg 指角度制,一周的角度是360°,直角是90°
grad 指百分度制,一周的角度是400,直角是100
turn 圈, 1turn代表旋转一圈
rad 指弧度制,一周的角度是2π,直角是π/2

转换比例为： 90deg = 100grad = 0.25turn ≈ 1.570796326794897rad

二、缩放(scale)

<!doctype html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <style>        img:hover{            transform: scale(1,-1)        }    </style></head><body>    <img  src="/static/imghw/default1.png"  data-src="http://dl.bizhi.sogou.com/images/2012/03/23/107607.jpg?f=download"  class="lazy" alt="CSS之Transform_html/css_WEB-ITnose" ></body></html>

登录后复制

语法格式如下：

scale(number,[number2])

number2是可选的，如果未设置，则与默认与number相同。number可以为正数、负数、小数。

我们将number分为两部分，正负号(+,-)和数值(number的绝对值)。负号(-)意味着元素要被旋转180度，数值部分大于1则放大，小于一则缩小，等于一既不放大又不缩小，为零时消失。

三、移动(translate)

<!doctype html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <style>        img:hover{            transform: translate(2in,5cm)        }    </style></head><body>    <img  src="/static/imghw/default1.png"  data-src="http://dl.bizhi.sogou.com/images/2012/03/23/107607.jpg?f=download"  class="lazy" alt="CSS之Transform_html/css_WEB-ITnose" ></body></html>

登录后复制

语法格式如下：

translate(value1,[value2])

第一个参数表示相对于原位置X轴偏移距离，第二个参数表示相对于Y轴偏移个距离，如果省略了第二个参数，则默认为0。正数向右和下偏移，负数向左和上偏移。

距离的单位有：

绝对长度单位
- px
- in
- cm
- mm
相对字体长度单位
- em
- rem
- pt
- pc
- ex
- ch
可视区百分比长度单位
- vw
- vh
- vmin
- vmax
离奇的长度单位
- %(百分比)

关于这些长度单位，这有一篇很好的介绍链接http://www.w3cplus.com/css/the-lengths-of-css.html，本段也是参照此链接，不过提示大家，浏览器的版本也在不断的迭代，有些特性需要自己去验证，比如vmax属性在我的chrome浏览器下也行正常运行。

四、倾斜(skew)

<!doctype html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <style>        img:hover{            transform: skew(30deg,-0.1turn)        }    </style></head><body>    <img  src="/static/imghw/default1.png"  data-src="http://dl.bizhi.sogou.com/images/2012/03/23/107607.jpg?f=download"  class="lazy" alt="CSS之Transform_html/css_WEB-ITnose" ></body></html>

登录后复制

语法格式：

skew(angle,[angle])

第一个参数表示相对于X轴进行倾斜，第二个参数相对于Y轴进行倾斜，如果省略了第二个参数，则默认为0。

rotate函数只是旋转，不改变元素的形状，但skew函数会改变元素的形状。

五、变形

<!doctype html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <style>        img:hover{            transform: matrix(1,0.4,0,1,0,0)        }    </style></head><body>    <img  src="/static/imghw/default1.png"  data-src="http://dl.bizhi.sogou.com/images/2012/03/23/107607.jpg?f=download"  class="lazy" alt="CSS之Transform_html/css_WEB-ITnose" ></body></html>

登录后复制

matrix()函数是一个3x3的矩阵，将旧的参数转换成新的参数。

目前，我对此也不是很了解，大家如有兴趣自行Google。

六、Transform-origin

CSS变形的原点默认是对象的中心点，如果要改变这个中心点，可以使用transform-origin属性进行定义。

<!doctype html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <style>        img:hover{            /*以左上角为原点旋转*/            transform-origin: top left;            transform: rotate(30deg);        }    </style></head><body>    <img  src="/static/imghw/default1.png"  data-src="http://dl.bizhi.sogou.com/images/2012/03/23/107607.jpg?f=download"  class="lazy" alt="CSS之Transform_html/css_WEB-ITnose" ></body></html>

登录后复制

语法格式：

transform-origin:[ [ | | left | center | right ][ | | top | center | buttom ] ? ] | [ [ left | center | right ] || [ top | center | bottom ]]

transform-origin属性的初始值是50%,50%，使用与块状元素和内联元素。transform-origin接受连个参数，他们可以是百分比、em、px等具体值也可以是left、center、right，或者top、middle、bottom等描述性关键字。

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

热工具

热门话题

Java教程

1671

CakePHP 教程

1428

Laravel 教程

1331

PHP教程

1276

C# 教程

1256

显示更多

Related knowledge

HTML：结构，CSS：样式，JavaScript：行为 Apr 18, 2025 am 12:09 AM

HTML、CSS和JavaScript在Web开发中的作用分别是：1.HTML定义网页结构，2.CSS控制网页样式，3.JavaScript添加动态行为。它们共同构建了现代网站的框架、美观和交互性。

HTML，CSS和JavaScript的未来：网络开发趋势 Apr 19, 2025 am 12:02 AM

HTML的未来趋势是语义化和Web组件，CSS的未来趋势是CSS-in-JS和CSSHoudini，JavaScript的未来趋势是WebAssembly和Serverless。1.HTML的语义化提高可访问性和SEO效果，Web组件提升开发效率但需注意浏览器兼容性。2.CSS-in-JS增强样式管理灵活性但可能增大文件体积，CSSHoudini允许直接操作CSS渲染。3.WebAssembly优化浏览器应用性能但学习曲线陡，Serverless简化开发但需优化冷启动问题。

HTML的未来：网络设计的发展和趋势 Apr 17, 2025 am 12:12 AM

HTML的未来充满了无限可能。1)新功能和标准将包括更多的语义化标签和WebComponents的普及。2)网页设计趋势将继续向响应式和无障碍设计发展。3)性能优化将通过响应式图片加载和延迟加载技术提升用户体验。

HTML：建立网页的结构 Apr 14, 2025 am 12:14 AM

HTML是构建网页结构的基石。1.HTML定义内容结构和语义，使用、、等标签。2.提供语义化标记，如、、等，提升SEO效果。3.通过标签实现用户交互，需注意表单验证。4.使用、等高级元素结合JavaScript实现动态效果。5.常见错误包括标签未闭合和属性值未加引号，需使用验证工具。6.优化策略包括减少HTTP请求、压缩HTML、使用语义化标签等。

HTML与CSS vs. JavaScript：比较概述 Apr 16, 2025 am 12:04 AM

HTML、CSS和JavaScript在网页开发中的角色分别是：HTML负责内容结构，CSS负责样式，JavaScript负责动态行为。1.HTML通过标签定义网页结构和内容，确保语义化。2.CSS通过选择器和属性控制网页样式，使其美观易读。3.JavaScript通过脚本控制网页行为，实现动态和交互功能。

HTML与CSS和JavaScript：比较Web技术 Apr 23, 2025 am 12:05 AM

HTML、CSS和JavaScript是构建现代网页的核心技术：1.HTML定义网页结构，2.CSS负责网页外观，3.JavaScript提供网页动态和交互性，它们共同作用，打造出用户体验良好的网站。

HTML：是编程语言还是其他？ Apr 15, 2025 am 12:13 AM

HTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1）htmlStructures andFormatSwebContentusingtags.2）itworkswithcsssforstylingandjavascript for Interactivity，增强WebevebDevelopment。