CSS3(3)---2D变形(transform)

【CSS3(3)---2D变形(transform)】的更多相关文章

CSS3(3)---2D变形(transform)

CSS3(3)---2D变形(transform) 2D变形是CSS3中具有颠覆性的特征之一,它常用的属性有:移动(translate).缩放(scale).旋转(rotate).倾斜 (skew). 一.2D变形语法 1.移动 (translate) 移动的属性: translate translate(x,y)水平方向和垂直方向同时移动(也就是X轴和Y轴同时移动) translateX(x)仅水平方向移动(X轴移动) translateY(Y)仅垂直方向移动(Y轴移动) 比如设置为: tra…

css3的2D变形

一.2D变形 1.变形 transform:translate();translateX();translateY();translate(,); 2.过渡 transition:all 1s; 二.具体体现的例子 1.位移的实例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport&quo…

css3中的变形 transform详解

一.变形-旋转 ratate()函数通过指定的角度参数使元素相对原点进行旋转.它主要在二维空间内进行操作,设置一个角度值,用来指定旋转的幅度.如果这个值为正值,元素相对原点中心顺时针旋转:如果这个值为负值,元素相对原点中心逆时针旋转. transform:rotate(-20deg) 如下图: 二.变形- 扭曲 skew()函数扭曲skew()函数能够让元素倾斜显示.它可以将一个对象以其中心位置围绕着X轴和Y轴按照一定的角度倾斜.这与rotate()函数的旋转不同,rotate()函数只是…

2D变形transform的translate和rotate

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>transform的 translate和rotate</title> <style type="text/css"> #div1{ height:200px; width: 200px; border:1px solid; transform: translate…

CSS3过渡、变形和动画

1.CSS3过渡所谓CSS3过渡,就是使用CSS3让元素从一种状态慢慢转换到另一种状态.如鼠标的悬停状态就是一种过渡.如下例子: #content a{ text-decoration: none; font:2.25em; background-color: #b01c20; text-transform: uppercase; border-radius: 8px; color: #fff; padding:30px; flo…

CSS3 过渡、变形和动画

一.我们来给按钮增加一个悬停效果:#content a:hover {border: 1px solid #000000;color: #000000;text-shadow: 0px 1px white;}两种状态下的效果如下,先看默认状态: 再看悬停状态: 这里只是在鼠标悬停时简单地修改了一下文字.文字阴影以及边框的颜色.所以,你可能想象出来,使用这段 CSS 代码,当鼠标悬停在按钮上面时,按钮会直接从第一种状态(白色文字)突变到第二种状态(黑色文字)——就是一个开关效果.我们来给第一段CS…