CSS之Transform_html/css_WEB-ITnose
我们利用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:[ [
transform-origin属性的初始值是50%,50%，使用与块状元素和内联元素。transform-origin接受连个参数，他们可以是百分比、em、px等具体值也可以是left、center、right，或者top、middle、bottom等描述性关键字。
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
What is the purpose of the <datalist> element?
Mar 21, 2025 pm 12:33 PM
The article discusses the HTML <datalist> element, which enhances forms by providing autocomplete suggestions, improving user experience and reducing errors.Character count: 159
How do I use HTML5 form validation attributes to validate user input?
Mar 17, 2025 pm 12:27 PM
The article discusses using HTML5 form validation attributes like required, pattern, min, max, and length limits to validate user input directly in the browser.
What is the purpose of the <iframe> tag? What are the security considerations when using it?
Mar 20, 2025 pm 06:05 PM
The article discusses the <iframe> tag's purpose in embedding external content into webpages, its common uses, security risks, and alternatives like object tags and APIs.
What is the purpose of the <progress> element?
Mar 21, 2025 pm 12:34 PM
The article discusses the HTML <progress> element, its purpose, styling, and differences from the <meter> element. The main focus is on using <progress> for task completion and <meter> for stati
What is the purpose of the <meter> element?
Mar 21, 2025 pm 12:35 PM
The article discusses the HTML <meter> element, used for displaying scalar or fractional values within a range, and its common applications in web development. It differentiates <meter> from <progress> and ex
What are the best practices for cross-browser compatibility in HTML5?
Mar 17, 2025 pm 12:20 PM
Article discusses best practices for ensuring HTML5 cross-browser compatibility, focusing on feature detection, progressive enhancement, and testing methods.
What is the viewport meta tag? Why is it important for responsive design?
Mar 20, 2025 pm 05:56 PM
The article discusses the viewport meta tag, essential for responsive web design on mobile devices. It explains how proper use ensures optimal content scaling and user interaction, while misuse can lead to design and accessibility issues.
How do I use the HTML5 <time> element to represent dates and times semantically?
Mar 12, 2025 pm 04:05 PM
This article explains the HTML5 <time> element for semantic date/time representation. It emphasizes the importance of the datetime attribute for machine readability (ISO 8601 format) alongside human-readable text, boosting accessibilit
