CSS3动画

最新推荐文章于 2024-06-17 17:26:11 发布

RookieChicken

最新推荐文章于 2024-06-17 17:26:11 发布

阅读量18

点赞数

文章标签： css3 前端 css

本文链接：https://blog.csdn.net/qq_45669178/article/details/132972327

版权

theme: cyanosis

highlight: pojoaque

制作ico 和网站标志的小图标：http://www.bitbug.net

分享按钮(bShare分享)：http://www.bshare.cn/

一、css3变形 (transform)

css 语法：transform:rotate(旋转)|scale(缩放)|skew(倾斜)|translate(位移);

1、rotate(旋转)

1)rotateX(180deg) 等于 rotate3d(1,0,0,180deg) 沿x轴旋转180deg

2)rotateY(180deg) 等于 rotate3d(0,1,0,180deg) 沿y轴旋转180deg

3)rotateZ(180deg) 等于 rotate3d(0,0,1,180deg) 沿z轴旋转180deg

4)rotate(180deg) 不指定轴时，是2d平面的旋转，正值顺时针，负值逆时针

注：rotate旋转的单位为deg，同时旋转是按照线去转动的。

demo： html <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>旋转</title> <style> body,p,ul,ol,dl,dd,h1,h2,h3,h4,h5,h6,hr,td,input,textarea{ margin:0; padding:0; } body{ padding-top: 100px; } .box{ width: 200px; height: 100px; border-radius: 20px; background: greenyellow; text-align: center; line-height: 100px; font-size: 20px; margin:20px auto; transition: all 1s; } .box1{ transform-origin: bottom; } .box1:hover{ transform:rotateX(180deg); /*transform:rotate3d(1,0,0,180deg);*/ } .box2{ transform-origin: right; } .box2:hover{ /*transform:rotateY(180deg);*/ transform:rotate3d(0,1,0,180deg); } .box3{ background: pink; transform-origin:50% 100%;/*也可以用左右上下来表示旋转点*/ } .box3:hover{ transform:rotateZ(180deg); } .box4{ /*transform-origin: 100% 0;*/ } .box4:hover{ transform:rotate(-180deg); } </style> </head> <body> <div class="box box1">沿x轴旋转</div> <div class="box box2">沿y轴旋转</div> <div class="box box3">沿z轴旋转</div> <div class="box box4">旋转</div> </body> </html>

案例：

1)反转纸牌

html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title></title> <style> * { margin: 0; padding: 0; } html, body { height: 100%; } body { background: black; } .box { width: 171px; height: 283px; position: relative; } .box img { position: absolute; top: 0; left: 0; transition: all 1s; /* 隐藏反转元素的背面,要把每个元素要看成又厚度的 */ backface-visibility: hidden; } .box img:first-child { transform: rotateY(180deg); } .box:hover img:first-child { /* 因为浏览器无法识别在转180 ，只能转到0或者360*/ transform: rotateY(0deg); /* 转完之后要让下面的上拉 */ z-index:1; } /* 让遮盖图转到后面去 */ .box:hover img:last-child{ transform: rotateY(180deg); } </style> </head> <body> <div class="box"> <img src="./images/a2.png" alt=""> <img src="./images/a1.png" alt=""> </div> </body> </html>

2.scale(缩放)

1) scaleX(1.5) 等于 scale3d(1.5,1,1) 沿x轴缩放，默认值为1，大于1放大，小于1缩小，为0时类似于隐藏

2)scaleY(0.5) 等于 scale3d(1,0.5,1) 沿y轴缩放

3)scaleZ(1.5) 等于 scale3d(1,1,1.5) 沿z轴缩放

4)scale(1.5) 不指定轴时，x轴和y轴同时缩放，设置为负值时翻转加缩放 ```html

缩放

<div class="text">这块要是三个盒子，不能放zai 一个div中</div>
    <img src="./images/circular.png" alt="" class="circular">
    <img src="./images/big.png" alt="" class="big">
</div>

```

在动画效果中的显示隐藏，都是opacity 0 和 1的切换

5.使用动画居中元素

```css ★ 使用css3变形的方式实现未知大小的元素在屏幕窗口水平垂直都居中

元素{ position:fixed; left:50%; top:50%; transform:translateX(-50%) translateY(-50%); }

★ 使用css3变形的方式实现未知大小的子元素在父元素中水平垂直都居中

父元素{ position:relative; }

子元素{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); } ```

二、改变变形元素的中心点位置

三、变形综合

我们经常需要将多种变形综合使用，顺序不同，有可能效果不同

eg1: ``` transform:rotate(360deg) scale(2);
transform:scale(2) rotate(360deg);

放大和旋转顺序不同，效果相同 eg2: transform:translateX(100px) rotate(360deg);

旋转和位置顺序不同，效果不同(所以要先位移后旋转) ``` 原因：元素在旋转的过程中三根轴线也在跟着发生旋转

四、设置元素变形的类型

语法：transform-style:flat(默认值，2d变形)|preserve-3d(3d变形);

只要是3d变形，都必须加上这句话。

五、3d透视或井深

语法：perspective:数值+单位;

父元素{perspective:1000px;}

给变形的子元素{transform:perspective(700px) rotateY(30deg);} html <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>3d透视或井深</title> <style> .box{ width: 1000px; border:1px solid black; display: flex; margin-top: 60px; perspective: 500px; justify-content: center; } .box a{ width: 100px; height: 300px; margin-right: 20px; transform-style: preserve-3d; transform:rotateY(30deg); } .box a:nth-child(1){ background: red; transform:perspective(1500px) rotateY(30deg); } .box a:nth-child(2){ background: orange; } .box a:nth-child(3){ background: yellow; } .box a:nth-child(4){ background: green; } .box a:nth-child(5){ background: pink; } .box a:nth-child(6){ background: blue; transform:perspective(200px) rotateY(30deg); } </style> </head> <body> <div class="box"> <a href="#"></a> <a href="#"></a> <a href="#"></a> <a href="#"></a> <a href="#"></a> <a href="#"></a> </div> </body> </html> 立方体 ```html

立方体

RookieChicken

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3动画

theme: cyanosishighlight: pojoaque制作ico 和网站标志的小图标：http://www.bitbug.net分享按钮(bShare分享)：http://www.bshare.cn/一、css3变形 (transform)css语法：transform:rotate(旋转)|scale(缩放)|skew(倾斜)|translate(位移)...
复制链接

扫一扫