CSS特效和形变

来源：互联网发布：淘宝破零方法编辑：程序博客网时间：2024/05/17 23:19

一：CSS形变

1. 2D形变

需要用到的属性：

transform

缩放

transfrom.scale(2)；放大两倍

旋转

transfrom:rotate(45deg); /*顺时针旋转45度*/

平移

transform:translate(100px,300px)； x轴平移100px，y轴平移300px。

扭曲，倾斜

transform：skew(30deg,30deg)；x轴，y轴扭曲30度。

矩阵

transfrom：matrix(1,0,0,1,100,100);

matrix() 6个属性的意思是：

第一个宽度比例1就是原大小，

第二个是上下倾斜1就是2倍，2就是3倍，0就是不倾斜，

第三个是左右倾斜，数字和第2个一样的意思，

第四个是高度比例1就是原大小，

第五个是x方向的像素位移，x方向就是左右，

第六个是y方向的像素位移，y方向就是上下。

index.html:

<!DOCTYPE html><html><head><meta charset="utf-8" /><title>2D形变</title><style>* {margin: 0px auto;}body {width: 100px;}.box {width: 50px;height: 50px;background: cadetblue;border: 1px solid red;}.box1 {margin-top: 10px;width: 70px;height: 70px;background: blue;border: 1px solid yellow;}.box2{margin-top: 10px;width: 70px;height: 70px;background: gold;border: 1px solid yellow;}.box3{margin-top: 10px;width: 70px;height: 70px;background: greenyellow;border: 1px solid yellow;}.box4{margin-top: 10px;width: 70px;height: 70px;background: cyan;border: 1px solid yellow;}.box5{margin-top: 10px;width: 70px;height: 70px;background: fuchsia;border: 1px solid yellow;}.box:hover {transform: rotate(30deg);}.box1:hover {transform: scale(2);}.box2:hover{transform: scaleX(0.3) scaleY(3)rotate(45deg);}.box3:hover{transform: skew(30deg,30deg);}.box4:hover{transform: matrix(2,30,30,2,20,20);}.box5:hover{transform: rotateX(30deg) rotateY(50deg) rotateZ(60deg);transform-style: preserve-3d;}</style></head><body><div class="box"></div><div class="box1"></div><div class="box2"></div><div class="box3"></div><div class="box4"></div><div class="box5"></div></body></html>

2. 3D形变

demo1.html：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><!--帧动画--><style type="text/css">.box{height: 80px;width: 80px;background: red;}.box:hover{animation: divAnimation 5s;}/*定义帧动画*/@-webkit-keyframes divAnimation{from{background: red;width: 80px;}20%{background: green;width: 100px;}                 50%{                 background: blue;                 width: 120px;                 }                    70%{                 background: pink;                 width: 80px;                 }                 to{                 background: black;                 width: 80px;                 }}</style></head><body><div class="box"></div></body></html>

阅读全文

0 0