CSS学习之旅---3D转换

rotate：作用是让元素在二维的平面内顺时针或者逆时针旋转

使用步骤：

  1. 给元素添加属性 transform
  2. 属性为：rotate 例如：transform:rotate(45deg) 顺时针方向旋转角度为:45°
  div {
    transform:rotate(45deg);
  }

2D 转换之三角案例

  <!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>三角案例</title>
        <style>
           /*给这个div设置宽度高度*/
           div {
             position: relative;
             width: 238px;
             height: 35px;
             border: 1px solod #333;
           }
          /*通过伪元素的方法来绘制三角*/
          div::after {
            content: "";
            /*使用定位把画出来的小三角定位给div元素*/
            position: absolute;
            top: 8px;
            right: 16px;
            width: 10px;
            height: 10px;
            border-right: 1px solid #000;
            border-bottom: 1px solid #000;
            /*使用 rotate 进行角度旋转*/
            transform: rotate(45deg);
          }
        </style>
</head>
<body>
  <!--准备一个div盒子-->
  <div></div>
</body>
</html>

注意事项：

  • transform-origin（设置中心点） 后面的参数 x 和 y 需要使用 逗号分割
  • x，y 默认旋转的中心点就是（50%,50%）等价于：center center
  • 还可以给 x,y 设置方位名词 【top、bottom、left、right、center】

2D 转换之 scale【缩放】

  1. scale 主要作用是用来控制元素的大小缩放

  2. 语法： transform: scale(x,y)

  3. 注意事项：

    • transform: scale(1, 1): 宽高都放大一倍，相当于没有放大
    • transform: scale(2, 2): 宽和高都放大了二倍
    • transform: scale(2): 如果只写了一个参数，第二个参数就和第一个参数一致
    • transform:scale(0.5, 0.5): 缩小
    • scale 最大的优势：可以设置转换中心点缩放，默认以中心点缩放，而且不影响其他盒子

  4. 代码演示：

        div:hover {
      /*注意：数字是放大的倍数所以不需要加单位*/
      transform: scale(2,2);
    }

动画 【animation】

  1. 什么是CSS 动画
    • 动画是 CSS3 中最具颠覆性的特征之一，可通过设置多个节点来精确的控制一个或者一组动画，从而实现复杂的动画效果
  2. 使用步骤：
    • 先定义动画
    • 在需要使用的地方 写入定义好的动画名称即可
  3. 语法格式：
       @keyframes 动画名称 {
     0% {
     
     }
     100%{
     
     }
   }
   
    div {
     /* 调用动画 */
        animation-name: 动画名称;
       /* 持续时间 */
       animation-duration: 持续时间；
    }
 
  /* 动画名称 */
  animation-name: move;
  /* 动画花费时长 */
  animation-duration: 2s;
  /* 动画速度曲线 */
  animation-timing-function: ease-in-out;
  /* 动画等待多长时间执行 */
  animation-delay: 2s;
  /* 规定动画播放次数 infinite: 无限循环 */
  animation-iteration-count: infinite;
  /* 是否逆行播放 */
  animation-direction: alternate;
  /* 动画结束之后的状态 */
  animation-fill-mode: forwards;

3D 转换

  • 3D 移动就是在 2D 移动的基础上多加了一个可以移动的方向，就是 z 轴方向
  • transform: translateX(100px)：仅仅是在 x 轴上移动
  • transform: translateY(100px)：仅仅是在 y 轴上移动
  • transform: translateZ(100px)：仅仅是在 z 轴上移动
  • transform: translate3d(x, y, z)：其中x、y、z 分别指要移动的轴的方向的距离
  • 注意：x, y, z 对应的值不能省略，不需要填写用 0 进行填充

透视：【perspective】

  1. 知识点讲解
  • 如果想要网页产生 3D 效果需要透视(理解成 3D 物体投影的 2D 平面上)
    • 实际上模仿人类的视觉位置，可视为安排一直眼睛去看
    • 透视也称为视距，所谓的视距就是人的眼睛到屏幕的距离
    • 距离视觉点越近的在电脑平面成像越大，越远成像越小
    • 透视的单位是像素
  1. 知识要点
  • 透视需要写在被视察元素的父盒子上面
  • 注意下方图片

    • d：就是视距，视距就是指人的眼睛到屏幕的距离

    • z：就是 z 轴，z 轴越大(正值)，我们看到的物体就越大
      ​

  1. 代码演示

    body {
  perspective: 1000px;
}
posted @ 2021-10-09 16:40  小学生学Web前端  阅读(51)  评论(0)    收藏  举报