移动Web 第二天# 空间位移和立体图形的基本知识

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

NIE52

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

阅读量310

点赞数

文章标签： css3

本文链接：https://blog.csdn.net/weixin_59166066/article/details/124411819

版权

theme: cyanosis
highlight: a11y-light

移动

移动Web第二天—空间转换

空间转换

目标：使用transform属性实现元素在空间内的位移，旋转，缩放效果

空间：是从坐标轴定义的。x,y,z三条坐标轴构成了一个立体空间，z轴位置与视线方向相同。
空间转换也叫3D转换
属性：transform

空间位移

目标：使用transform实现元素空间位移效果

语法
- transform：translate3d(x,y,z);
- transform：translateX(值px 或者百分比); 向X轴位移 X要大写取值正负都可
- transform：translateY(值px 或者百分比);
- transform：translateZ(值px 或者百分比);
透视

目标：使用perspective属性实现透视效果
- l思考：生活中，同一个物体，观察距离不同，视觉上有什么区别？
  
  答：近大远小、近清楚远模糊
- 思考：默认情况下，为什么无法观察到Z轴位移效果？
  
  答：Z轴是视线方向，移动效果应该是距离的远或近，电脑屏幕是平面，默认无法观察远近效果
  
  例如：就像一个盒子，从正面观察它是看不到的长度的跟小学的从正面侧面观察正方体一样
**

使用perspective：值 800-1200px

给其父级添加

，…perspective只增加近大远小、近实远虚的视觉效果。

空间旋转

目标：使用rotate实现元素空间旋转效果

语法

transform:rotateZ(值)；
transform:rotateY(值);
transform:rontate(值)；

左手法则

判断旋转方向: 左手握住旋转轴, 拇指指向正值方向, 手指弯曲方向为旋转正值方向

拓展

rotate3d(x, y, z, 角度度数) ：用来设置自定义旋转轴的位置及旋转的角度

x，y，z 取值为0-1之间的数字

立体呈现

目标：使用transform-style:preserve-3d呈现立体图形

实现方法：

添加transform-style:preserve-3d
使子元素处于真正的3d空间
呈现立体图形步骤
1. 盒子父级添加transform-style:preserve-3d;
2. 按需求设置盒子的位置(位移或旋转)

使用transform-style属性实现立方体案例

思路：

定一个父盒子box包装着6个小平面
使用定位把六个面叠在一起，并给每个面设置不同的颜色
使用空间变换来实现立方体，就是吧每个没移到对应的位置
- 前： z轴正移动 +100
- 后： z轴负移动 -100
- 左： x轴负移动 -100 y轴旋转 90deg
- 右： x轴正移动 100 y轴旋转 90deg
- 上： y轴负移动 -100 x轴旋转 90deg
- 下： y轴正移动 100 x轴旋转 90deg

给box开启立体效果，并旋转box查看效果

使用transform-style属性实现立方体案例

代码如下：

<title>立方体案例</title>
    <style>
        .box{
            width: 300px;
            height: 300px;
            background-color:pink;
            margin: 100px auto;
            position: relative;        }
        div{
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            /* 开启3d效果 */
            transform-style:preserve-3d ;
            transform:rotate3d(1,1,1,30deg);
        }
        .top{
            background-color:red;
            transform: translateY(-150px) rotateX(90deg);
            
        }
        .bottom{
            background-color:green;
            transform: translateY(150px) rotateX(90deg);
        }
        .left{
            background-color:blue;
            transform:translateX(-150px) rotateY(90deg)  ;
        }
        .right{
            background-color:yellow;
            transform: translateX(150px) rotateY(90deg);
        }
        .qian{
            background-color:tomato;
            /* 前后是z轴运动 */
            transform: translateZ(150px);
        }
        .hou{
            background-color:springgreen;
            transform: translateZ(-150px);
        }

    </style>
</head>
<body>
    <!-- 先来个大盒子 -->
    <div class="box">
        <div class="top">上</div>
        <div class="bottom">下</div>
        <div class="left">左</div>
        <div class="right">右</div>
        <div class="qian">前</div>
        <div class="hou">后</div>

    </div>
</body>

效果如下：

NIE52

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
移动Web 第二天# 空间位移和立体图形的基本知识

theme: cyanosishighlight: a11y-light移动移动Web第二天—空间转换空间转换目标：使用transform属性实现元素在空间内的位移，旋转，缩放效果空间：是从坐标轴定义的。x,y,z三条坐标轴构成了一个立体空间，z轴位置与视线方向相同。空间转换也叫3D转换属性：transform空间位移目标：使用transform实现元素空间位移效果语法transform：translate3d(x,y,z);transform：translateX.
复制链接

扫一扫