WEb开发之H5+CSS篇

最新推荐文章于 2024-01-20 14:07:53 发布

原创最新推荐文章于 2024-01-20 14:07:53 发布 · 273 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#node.js #npm #webkit #前端

笔记同时被 3 个专栏收录

150 篇文章

订阅专栏

橘子超酸辣

48 篇文章

订阅专栏

操作手册

38 篇文章

订阅专栏

本文深入探讨了CSS3中的2D和3D转换，包括translate、rotate和scale等，以及如何通过transform-origin调整转换中心点。同时介绍了CSS3动画的原理和使用，如@keyframes规则创建复杂动画效果。此外，还讨论了3D转换的应用，如透视、transform-style等，通过实例展示了3D旋转和位移。最后提到了浏览器的私有前缀以及时间管理的重要性。

WEb开发之H5+CSS篇

CSS2 2D转化

transfrom

translate（移动）

---------------------------> x 轴

|

|

| y轴

定义2D转换中的移动，沿着X和Y轴移动元素

不会影响其他元素的位置

百分比单位是相对于自身元素的宽高来对比的

对行内标签没有效果

技巧：盒子水平垂直居中
```
 position: absolute;

      left: 50%;

      top: 50%;

      transform: translate(-50%, -50%);
```
rotate （旋转）

rotate里面跟度数，单位是deg

角度为正，顺时针；角度为负，逆时针

默认旋转的中心点是元素的中心点
transform-origin（转换中心点）

注意后面参数x y 是用空格隔开的

x y默认转换的中心点是元素的中心点（50% 50%）

还可以给x y 设置像素或者方位名词（上下左右中间）
scale （缩放）

注意其中的x y用逗号隔开，不加单位数字表示倍数。

transform：scale（1,1）宽和高都放大一倍，相当于没有放大。

transform：scale（2,2）宽和高都放大了2倍。

transform：scale（2）只写一个参数，第二个参数则和第一个参数一样，相当于 scale（2,2）

transform：scale （0.5,0.5）缩小

sacle缩放最大的优势：可以设置旋转中心点缩放，默认以中心点缩放的，而且不影响其他盒子

综合写法

transform：translate rotate scale

CSS3 动画

animation，可以通过设置多个节点来精确控制一个或者一组动画，实现复杂的动画效果。

动画序列

0%是动画的开始，100%是动画的结束。这样的规则就是动画序列。
在@keyframes中规定某项CSS样式，就能创建由当前样式逐渐改为新样式的动画效果。
动画是使元素从一种样式逐渐变化为另一种样式的效果。您可以改变任意多的样式任意多的次数。
请用百分比来规定变化发生的时间，或用关键字“form”和“to”，等同于0%和100%。

属性	描述	CSS
@keyframes	规定动画。	3
animation	所有动画属性的简写属性，除了 animation-play-state 属性。	3
animation-name	规定 @keyframes 动画的名称。	3
animation-duration	规定动画完成一个周期所花费的秒或毫秒。默认是 0。	3
animation-timing-function	规定动画的速度曲线。默认是 “ease”。	3
animation-delay	规定动画何时开始。默认是 0。	3
animation-iteration-count	规定动画被播放的次数。默认是 1。	3
animation-direction	规定动画是否在下一周期逆向地播放。默认是 “normal”。	3
animation-play-state	规定动画是否正在运行或暂停。默认是 “running”。	3
animation-fill-mode	规定对象动画时间之外的状态。	3

简写：前四个一样，（前两个不能省略）后面的可以不一样。

CSS3 3D转化

3D：近大远小，物体后面遮挡不可见，

三维坐标系。

X轴：水平向右 X右边是正值，左边是负值
Y轴：垂直向下 Y下面是正值，上面是负值
Z轴：垂直屏幕往外面是正值，往里面是负值

3D位移：translate3D（x,y,z）

3D旋转：rotate3D(x,y,z)

透视：perspectivw(写在观察元素的父盒子上面)

3D呈现：transfrom-style

<!DOCTYPE html>

<html lang="en">



<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <style>

    body {

      perspective: 500px;

    }

    

    .box {

      position: relative;

      width: 200px;

      height: 200px;

      margin: 100px auto;

      transform-style: preserve-3d;

    }

    

    .box:hover {

      transform: rotateY(60deg);

    }

    

    .box div {

      position: absolute;

      top: 0;

      left: 0;

      width: 100%;

      height: 100%;

      background-color: wheat;

    }

    

    .box div:last-child {

      background-color: yellowgreen;

      transform: rotateX(60deg);

    }

  </style>

  <title>Document</title>

</head>



<body>

    <div class="box">

        <div></div>

        <div></div>

  </div>

</body>



</html>