Maison > interface Web > tutoriel HTML > CSS中的transform与transition

CSS中的transform与transition

WBOY
Libérer: 2016-09-21 13:56:10
original
1669 Les gens l'ont consulté

transform:转换

对元素进行移动、缩放、转动、拉长或拉伸。

方法:translate():

元素从其当前位置移动,根据给定的 left(x 坐标) 和 top(y 坐标) 位置参数

有两个div,它们的css样式如下:

<span style="font-size: 14px;">.before {
            width: 70px;
            height: 70px;
            background-color: #8fbc8f;
        }

 .after {
            width: 70px;
            height: 70px;
            background-color: #ffe4c4;
            -webkit-transform: translate(50px, 30px);
            -moz-transform: translate(50px, 30px);
            -ms-transform: translate(50px, 30px);
            -o-transform: translate(50px, 30px);
            transform: translate(50px, 30px);
        }
</span>
Copier après la connexion

结果如下:

rotate()

元素顺时针旋转给定的角度。允许负值,元素将逆时针旋转。

有两个div,它们的css样式如下

<span style="font-size: 14px;">.before {
            width: 70px;
            height: 70px;
            background-color: #8fbc8f;
        }

.after {
            width: 70px;
            height: 70px;
            background-color: #ffe4c4;
            -webkit-transform: rotate(20deg);
            -moz-transform: rotate(20deg);
            -ms-transform: rotate(20deg);
            -o-transform: rotate(20deg);
            transform: rotate(20deg);
        }
</span>
Copier après la connexion

结果如下:

scale()

元素的尺寸会增加或减少,根据给定的宽度(X 轴)和高度(Y 轴)参数

有两个div,它们的css样式如下:

<span style="font-size: 14px;">.before {
            width: 70px;
            height: 70px;
            background-color: #8fbc8f;
        }

.after {
            width: 70px;
            height: 70px;
            background-color: #ffe4c4;
            -webkit-transform: scale(1.5, 0.8);/*宽度变为原来的1.5倍,高度变为原来的0.8倍*/
            -moz-transform: scale(1.5, 0.8);
            -ms-transform: scale(1.5, 0.8);
            -o-transform: scale(1.5, 0.8);
            transform: scale(1.5, 0.8);
        }
</span>
Copier après la connexion

结果如下:

skew()

元素翻转给定的角度,根据给定的水平线(X 轴)和垂直线(Y 轴)参数

<span style="font-size: 14px;">.before {
            width: 70px;
            height: 70px;
            background-color: #8fbc8f;
        }

.after {
            width: 70px;
            height: 70px;
            background-color: #ffe4c4;
            -webkit-transform: skew(20deg, 20deg);/*围绕 X 轴把元素翻转20度,围绕 Y 轴翻转20度*/
            -moz-transform: skew(20deg, 20deg);
            -ms-transform: skew(20deg, 20deg);
            -o-transform: skew(20deg, 20deg);
            transform: skew(20deg, 20deg);
        }
</span>
Copier après la connexion

  

结果如下:

transition:过渡

元素从一种样式逐渐改变为另一种的效果

有一个div,它的css样式如下:

<span style="font-size: 14px;">div {
            width:100px;
            height:100px;
            background-color: #87cefa;
            -webkit-transition: width 2s;/*时长为2s的宽度变化效果*/
            -moz-transition: width 2s;
            -o-transition: width 2s;
            transition: width 2s;
        }
div:hover{
            width:300px;
        }
</span>
Copier après la connexion

 

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal