CSS笔记——3D

一、三维坐标系 和 透视

透视 perspective

  • 网页产生3D效果需要透视
  • 模拟人类的视觉位置,可认为安排一只眼睛去看
  • 透视也称为视距:视距就是人的眼睛到屏幕的距离
  • 越近成像越大,越远成像越小;即Z轴越大,成像越大
  • 透视的单位是像素
  • 透视写到3D元素的父盒子上

二、3D位移 translate3d(x,y,z)

2.1 语法

  • translate3dX();  左右
  • translate3dY(); 上下
  • translate3dZ();   内外 Z轴上一般用精确单位(px)
  • translate3d(x,y,z);  xyz不能省略 如果没有就写0

三、3D旋转rotate3d

3.1 语法

  • transform:rotateX(ndeg); 沿着x轴旋转n度;正值:后仰;负值:前倾
  • transform:rotateY(ndeg);
  • transform:rotateZ(ndeg);
  • transform:rotate(x,y,z,ndeg);沿着自定义轴旋转  (1,1,0)沿着对角线

3.2 旋转方向:左手准则

四、3D呈现 transform-style

  • 控制子元素是否开启三维立体环境
  • transform-style:flat 子元素不开启3d立体空间 默认的
  • transform-style:preserve-3d;子元素开启立体空间
  • 代码写给父级,影响的是盒子

五、应用

  1. 移动写在旋转前面 transform: translateY(15px) rotateX(-90deg);

旋转木马

        body {
            perspective: 1200px;
        }
        .box {
            transform-style: preserve-3d;
            position: relative;
            margin: 200px auto;
            height: 200px;
            width: 300px;
            animation: dog1 5s infinite linear;
        }
        .box div {
            position: absolute;
            top: 0;
            right: 0;
            width: 100%;
            height: 100%;
            background: url('img/dog.jpg');
        }

        /* 现移动 再旋转 */
        .box div:nth-child(1) {
            transform: translateZ(300px);
        }
        .box div:nth-child(2) {
            transform: rotateY(-60deg) translateZ(300px);
        }
        .box div:nth-child(3) {
            transform: rotateY(-120deg) translateZ(300px);
        }
        .box div:nth-child(4) {
            transform: rotateY(-180deg) translateZ(300px);
        }
        .box div:nth-child(5) {
            transform: rotateY(-240deg) translateZ(300px);
        }
        .box div:nth-child(6) {
            transform: rotateY(-300deg) translateZ(300px);
        }
        @keyframes dog1 {
            0% {}
            100% {
                transform: rotateY(360deg);
            }
        }
        .box:hover {
            animation-play-state: paused;
        }

视频地址

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页