transform属性

来源：互联网发布：moto 860联通网络编辑：程序博客网时间：2024/05/22 01:40

transform

transform：translateX(300px) rotate(50deg) skew（30deg,20deg） scale(2,4);

1.translate 移动

transform:translate(300px,200px); 水平偏移300px,垂直偏移200px

transform:translateX(300px); 水平偏移300px,

transform:translateY(200px); 垂直偏移200px（单独写的话，水平偏移和垂直偏移只写一个）

2.rotate 旋转

transform:rotate(50deg); 旋转50度

3.scale 缩放

0~1：缩小 >1：放大

transform:scale(2,4); 水平放大2倍，垂直放大4倍

4.skew 倾斜

transform：skew（30deg,20deg）;

eg1:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>transform</title>    <style>        div{            width:200px;            height:200px;            background:yellowgreen;            /*移动*/            /*-webkit-transform: translate(200px,300px);*/            /*-moz-transform: translate(200px,300px);*/            /*-ms-transform: translate(200px,300px);*/            /*-o-transform: translate(200px,300px);*/            /*transform: translate(200px,300px);!*水平偏移 垂直偏移*!*/            /*transform: translateX(200px); !*单独水平偏移，单独的水平垂直偏移不可同时用*!*/            /*transform: translateY(300px);!*单独垂直偏移，单独的水平垂直偏移不可同时用*!*/            /*缩放 0-1:缩小  >1:放大*/            /*-webkit-transform: scale(2,3);*，            /*-moz-transform: scale(2,3);*/            /*-ms-transform: scale(2,3);*/            /*-o-transform: scale(2,3);*/            /*transform: scale(2,3);*/            /*旋转*/            -webkit-transform: rotate(30deg);            -moz-transform: rotate(30deg);            -ms-transform: rotate(30deg);            -o-transform: rotate(30deg);            transform: rotate(30deg);            /*倾斜*/            /*-webkit-transform: skew(30deg,45deg);*/            /*-moz-transform: skew(30deg,45deg);*/            /*-ms-transform: skew(30deg,45deg);*/            /*-o-transform: skew(30deg,45deg);*/            /*transform: skew(30deg,45deg);*/            /*transform: skewX(30deg);!*单独水平倾斜，单独的水平倾斜不可同时用*!*/            /*transform: skewY(45deg);!*单独垂直倾斜，单独的垂直倾斜不可同时用*!*/        }    </style></head><body><div></div></body></html>

transform-origin 参考点

transform-origin：right bottom;

transform-origin:50% 80%;

transition

transition:transform/all 1s（不能省略） linear(匀速) / ease-in(先慢后快) / ease(先慢再快后慢) / ease-out(先快后慢) 1s(延迟1s);

transition:1s; (默认都是1s)

eg2:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>transform-origin&&transition</title>    <style>        div{            width:200px;            height:200px;            background: orange;            /*transition:1s;!*默认延迟1s后，以1s的时间再完成变化*!*/            /*transition: all 1s linear 1s;!*所有的transform属性都变化*!*/            transition: transform 1s ease-in 1s;            /*以1s的时间完成先慢后快的变化,后面的1s代表延迟1秒，前面的1s不可省略*/            /*transition: transform 1s linear 1s;!*以1s的时间完成匀速的变化  *!*/            /*transform-origin:right top;!*以右下角的点进行变化*!*/            transform-origin:50% 10%;/*以某点进行变化*/        }        div:hover{            background: red;            /*transform: translate(900px,200px) rotate(45deg)  scale(0.2);*/            transform: rotateY(180deg);        }    </style></head><body><div>HELLO WORLD</div></body></html>

阅读全文

0 0