CSS3的transform属性_html/css

来源：动视网责编：小采时间：2020-11-27 16:04:46

CSS3的transform属性_html/css

CSS3的transform属性_html/css_WEB-ITnose:CSS3的一些属性可能比较新，有一些书从国外翻译到国内的时间上会延缓1-2年。所以有一些东西还需要及时整理。下面说一下CSS3的一个属性：transform 其实字面上的意思已经很明显了就是变化，变幻的意思。那到底怎么个变法？ transform可以选下面几个值：

推荐度：

点击下载本文 文档为doc格式

导读CSS3的transform属性_html/css_WEB-ITnose:CSS3的一些属性可能比较新，有一些书从国外翻译到国内的时间上会延缓1-2年。所以有一些东西还需要及时整理。下面说一下CSS3的一个属性：transform 其实字面上的意思已经很明显了就是变化，变幻的意思。那到底怎么个变法？ transform可以选下面几个值：

CSS3的一些属性可能比较新，有一些书从国外翻译到国内的时间上会延缓1-2年。所以有一些东西还需要及时整理。

下面说一下CSS3的一个属性：transform

其实字面上的意思已经很明显了就是变化，变幻的意思。

那到底怎么个变法？

transform可以选下面几个值：

旋转-rotate（rotatex,rotatey）
倾斜-skew
缩放-scale
移动-translate

下面给出的例子可能都非常简单，真正详细的还是看W3School毕竟是定期更新的

1.rotate

a.rotate{ -webkit-transform: rotate(10deg); -ms-transform: rotate(10deg); -o-transform: rotate(10deg); transform: rotate(10deg);/*没有火狐的前缀，已经规范了*/}

transform

不知道大家知道不知道这里的20deg是什么意思，deg是度的意思大家都知道。然后20deg就是正向旋转20度，当然也有负向旋转的，上面代码全部改成-10deg之后就是下面这样，看下面：

transform

应该很清楚了，默认的旋转中心是矩形高和宽的中点

2.skew

a.skew{ -webkit-transform: skew(20deg); -ms-transform: skew(20deg); -o-transform: skew(20deg); transform: skew(20deg);/*没有火狐的前缀，已经规范了*/}

transform

斜切20度是什么概念？想象用手指从右边推矩形然后矩形像果冻一样倾斜了，倾斜的角度和原来的角度相差20度

3.scale

a.scale{ -webkit-transform: scale(1.5); -ms-transform: scale(1.5); -o-transform: scale(1.5); transform: scale(1.5);/*没有火狐的前缀，已经规范了*/}

transform

原来的是没放大是下面这样的：

transform

4.translate

a.translate{ -webkit-transform: translate(250px,10px); -ms-transform: translate(250px,10px); -o-transform: translate(250px,10px); transform: translate(250px,10px);/*没有火狐的前缀，已经规范了*/}

transform

原来的是没移动的时候是下面这样的，可能translateY看不太出来，但是X就非常明显了，translateY的大家脑补一下：

transform

5.transform综合

a.transform:hover{ -webkit-transform: rotate(10deg) skew(-20deg) scale(3) translate(150px,0px); -ms-transform: rotate(10deg) skew(-20deg) scale(3) translate(150px,0px); -o-transform: rotate(10deg) skew(-20deg) scale(3) translate(150px,0px); transform: rotate(10deg) skew(-20deg) scale(3) translate(150px,0px);/*没有火狐的前缀，已经规范了*/ -webkit-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; transition: all 1s ease-in-out;/*没有火狐和IE的前缀，已经规范了*/}

transform

鼠标hover一下你懂的

感觉自己总结的都很水，不过还是方便翻阅和学习的

CSS3的transform属性_html/css

推荐度：

点击下载本文 文档为doc格式

标签： html 属性 css3

热门焦点

CSS3的transform属性_html/css

CSS3的transform属性_html/css

CSS3的transform属性_html/css

最新推荐

猜你喜欢

热门推荐