023篇移动端网页开发---CSS3新特性之3D效果

最新推荐文章于 2024-04-13 15:44:30 发布

凡凡小码农～

最新推荐文章于 2024-04-13 15:44:30 发布

阅读量177

点赞数 3

文章标签： css3

本文链接：https://blog.csdn.net/m0_48387335/article/details/120146971

版权

一、3D转换

1.1 三维坐标系

1.2 3D转换---移动 transform3d

1.3 3D转换---透视 perspective

1.4 3D转换---3D旋转 rotate3d

二、3D呈现transform-style

一、3D转换

3D转换有什么特点

近大远小
物体后面遮挡不可见

1.1 三维坐标系

x轴：水平向右注意：右边是正值，左边是负值
y轴：垂直向下注意：下面是正值，上面是负值
z轴：垂直屏幕注意：往外面是正值，往里面是负值

1.2 3D转换---移动 transform3d

transform：translateX（100px）
transform：translateY（100px）
transform：translateZ（100px）:仅是在z轴上移动（注意：translateZ一般用px为单位，不用百分比）,z轴实现需要透视来完成
transform：translate3d(x,y,z):其中x，y，z分别指要移动的轴的方向的距离

<style>
    div{
        width:200px;
        height:200px;
        background-color:pink;
        /*x就是x轴移动的位置，y就是y轴移动的位置,z就是z轴移动的位置 中间用逗号分隔*/
        /*transform:translate3d(x,y,z);*/
        /*1.*/
        transform:translate3d(100px,100px,100px);
        /*2.单独用x轴和y轴的话不能同时实现x轴和y轴，后者会覆盖前者*/        
        transform:translateX(100px);
        transform:translateY(100px);
        /*3.这样可以同时实现x轴和y轴的移动*/
          transform:translateX(100px) translateY(100px) translateZ(100px);
        /*4.xyz不能省略，如果没有就写0 */
           transform:translate3d(0,100px,100px);
    }
</style>
<body>
<div>
</div>
</body>

1.3 3D转换---透视 perspective

透视我们也称为视距：视距就是人们的眼睛到屏幕的距离
距离视觉点越近的在电脑平面成像越大，越远成像越小
透视单位是像素

透视写在被观察元素的父盒子里面

1.4 3D转换---3D旋转 rotate3d

3D旋转可以让元素在三维平面内沿着x轴，y轴，z轴或者自定义进行旋转

语法：

transform：rotateX（45deg）:沿着x轴正方向旋转45度
transform：rotateY（45deg）：沿着y轴正方向旋转45度
transform：rotateZ（45deg）：沿着z轴正方向旋转45度
transform：rotate3d（x，y，z，deg）：沿着自定义轴旋转deg为角度，xyz表示旋转轴的矢量，标示着你是否希望沿着该轴旋转

 <style>
        body {
            perspective: 200px;
        }
        
        img {
            display: block;
            margin: 100px auto;
            transition: all 2s;
        }
        
        img:hover {
            /*1.沿着x轴旋转45度*/
            transform: rotate(1,0,0,45deg);
           /*2.沿着y轴旋转45度*/
            transform: rotate(0,1,0,45deg);
            /*3.沿着x和y轴矢量和的方向旋转*/
             transform: rotate(1,1,0,45deg);
        }
    </style>

<body>
    <img src="images/pig.jpg" alt="">
</body>

transform：rotate3d（x，y，z，deg）：沿着自定义轴旋转deg为角度，xyz表示旋转轴的矢量，标示着你是否希望沿着该轴旋转；比如说：transform: rotate(1,1,0,45deg)如下图

二、3D呈现transform-style

控制子元素是否开启三维立体环境
transform-style:flat默认子元素不开启3d立体空间
transform-style:perserve-3d;子元素开启立体空间

代码写给父级，但是影响的是子盒子

案例：

 <style>
        /* 透视给body和box加都可以，由于box还要旋转，就加在body中 */
        
        body {
            perspective: 500px;
        }
        
        .box {
            position: relative;
            margin: 100px auto;
            width: 200px;
            height: 200px;
            /* 在父盒子中添加3D呈现效果，开启子盒子的立体空间 */
            transform-style: preserve-3d;
            transition: all 2s;
        }
        
        .box:hover {
            transform: rotateY(60deg);
        }
        
        .box div {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: pink;
        }
        
        .box div:last-child {
            background-color: purple;
            transform: rotateX(85deg);
        }
    </style>
<body>
    <div class="box">
        <div></div>
        <div></div>
    </div>
</body>

凡凡小码农～

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
023篇移动端网页开发---CSS3新特性之3D效果

目录一、3D转换1.1 三维坐标系1.2 3D转换---移动 transform3d1.3 3D转换---透视 perspective1.43D转换---3D旋转 rotate3d二、3D呈现transform-style一、3D转换3D转换有什么特点近大远小物体后面遮挡不可见 1.1 三维坐标系 x轴：水平向右注意：右边是正值，左边是负值 y轴：垂直向下注意：下面是正值，上面是负值 z轴：垂直屏幕注意：往...
复制链接

扫一扫