移动web 空间转换 3D

news2024/11/13 11:03:29

移动web 空间转换 3D

    • 空间转换 3D
    • 3D位移
    • 透视
    • 3D旋
      • rotateX
      • rotateY
    • 左手法则
    • 立体呈现

空间转换 3D

3D坐标系

3D 坐标系比2D 多了一个Z轴。
在这里插入图片描述

一定要记住3个坐标轴取值的正反:

  • X 轴 往右越大,是正值, 否则反之
  • Y 轴 往下越大,是正值,否则反之
  • Z轴 (指向我们)越大,是正值,否则反之

3D位移

完整写法:

 transform: translate3d(x, y, z);

不过在很多情况下,经常喜欢分开写:

transform: translateX(100px);
transform: translateY(100px);
transform: translateZ(100px);
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: pink;
            /* 3d位移的写法 */
            /* x y z之间用逗号隔开 */
            /* transform: translate3d(x,y,z); */
            transform: translate3d(100px, 100px, 200px);
            transform: translate3d(100px, 0, 0);
        }
    </style>
<body>
    <div class="box"></div>
</body>

透视

透视的作用: 空间转换时,为元素添加近大远小、近实远虚的视觉效果

语法:

 perspective: 800px;

透视注意事项:

  1. 取值范围经常在 800px ~ 1200px 之间。

  2. 一定给父亲添加

  3. 透视距离也称为视距,所谓的视距就是人的眼睛到屏幕的距离。

    • 其中 d 为透视的距离
    • z 是 translateZ 的距离, 这个距离靠近我们,盒子越大
      在这里插入图片描述

3D旋

有了透视的加持,我们3d旋转效果会比较明显。

rotateX

类似单杠旋转。
在这里插入图片描述

注意:默认的旋转中心在盒子的中心位置。

 body {
     /* 父级添加透视 */
     perspective: 400px;
}

img {
    transition: all 1s;
}

img:hover {
    transform: rotateX(360deg);
}

rotateY

类似钢管舞。
在这里插入图片描述

body {
    perspective: 400px;
}

img {
    transition: all 1s;
}

img:hover {
    transform: rotateY(360deg);
}

左手法则

一定要搞清楚X轴和Y轴如何旋转的,旋转的度数是正值还是负值。

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

在这里插入图片描述

规则:

  1. 大拇指指向X轴正向方(右), 则四指指向的方向是旋转的方向
  2. 大拇指指向Y轴正向方(下), 则四指指向的方向是旋转的方向

立体呈现

让子盒子在父盒子内有空间的展示,此时可以给父亲添加

 transform-style: preserve-3d;
    <style>
        .cube {
            position: relative;
            width: 200px;
            height: 200px;
            margin: 100px auto;
            transition: all .5s;
            background-color: pink;
            /* 3d呈现 */
            transform-style: preserve-3d;
        }

        .cube div {
            /* 1.1 添加定位 让2个盒子叠加在一起 */
            position: absolute;
            left: 0;
            top: 0;
            width: 200px;
            height: 200px;
        }

        .front {
            /* 向我们面前拉(移动) */
            background-color: orange;
            /* transform: translateZ(200px); */
            transform: translateZ(100px);

        }

        .back {
            background-color: green;
            transform: translateZ(-100px);
        }

        .cube:hover {
            transform: rotateY(65deg);
        }
    </style>
</head>

<body>
    <div class="cube">
        <div class="front">前面</div>
        <div class="back">后面</div>
    </div>
</body>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/177810.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

React错误边界

首先 我们先构建出问题的场景 我们创建一个react项目 然后在src下创建 components 文件夹目录 在下面创建一个 error.jsx 组件 参开代码如下 import React from "react";export default class App extends React.Component{constructor(props){super(props);this.…

CUDA编程笔记(5)

文章目录前言CUDA的内存组织全局内存常量内存纹理内存和表面内存寄存器局部内存共享内存L1和L2缓存SM的构成API函数查询设备总结前言 cuda的内存组织&#xff0c;在使用GPU时尽可能提高性能&#xff0c;合理的使用设备的内存也是十分重要的。 CUDA的内存组织 如表所示&#…

Docker基本操作

Docker基本操作一、镜像操作1.镜像名称2.镜像命令&#xff08;1&#xff09;拉取、查看镜像&#xff08;2&#xff09;保存、导入镜像二、容器操作1.容器相关命令2.创建并运行一个容器3.进入容器&#xff0c;修改文件4.小结三、数据卷&#xff08;容器数据管理&#xff09;1.什…

Java:枚举类型

Java&#xff1a;枚举类型 每博一文案 师父说&#xff1a;人活一世&#xff0c;每个人都有他的特别&#xff0c;每个人都值得被温柔相待。红尘一遭&#xff0c;每段经历都有它的必然&#xff0c; 每段经历都造就了现在的你&#xff0c;最快乐的事情&#xff0c;就是做自己&…

Java多线程案例之定时器

一. 定时器概述 1. 什么是定时器 定时器是一种实际开发中非常常用的组件, 类似于一个 “闹钟”, 达到一个设定的时间之后, 就执行某个指定好的代码. 比如网络通信中, 如果对方 500ms 内没有返回数据, 则断开连接尝试重连.比如一个 Map, 希望里面的某个 key 在 3s 之后过期(自…

排序算法: 数据的离散化(排序+去重 C++例题实现)

文章目录数据的离散化例题&#xff1a;电影完整代码数据的离散化 离散化是指将一个无穷大的集合中的若干个元素映射到一个有限的集合中&#xff0c;以便于对那个无穷大的集合进行操作。 在很多情况下&#xff1a;对于一个规定在Z范围内的整数范围&#xff0c;他有可能包含非常…

maven创建自定义web工程模板

一&#xff0c;先搭建好一个项目模板。 注意每个文件夹下都放一个文件占位&#xff0c;否则创建模板时会认为是空目录不进行创建。 注意项目文件夹名字 和 pom.xml 中<artifactId 和 <name 的名字都使用相同的名字&#xff0c;写一个好记的名字&#xff0c;因为后面生…

QT UI布局设置整理-边框设置

一、设置边距的方法 1、设置容器内部的内容控件的边距 //设置容器leftBar&#xff08;QWidget&#xff09;内部marginui->leftBar->setContentsMargins(10,10,0,0); 2、 设置内部控件之间的间距 //editWidget是一个QWidget ui->editWidget->layout()->setSpac…

【云原生kubernetes】k8s中控制器使用详解

一、什么是控制器 控制器是管理pod的中间层&#xff0c;只需要告诉Pod控制器&#xff0c;想要创建多少个什么样的Pod&#xff0c;它会创建出满足条件的Pod &#xff1b;控制器相当于一个状态机&#xff0c;用来控制Pod的具体状态和行为 &#xff1b;controller会自动创建相应的…

【数据库概论】3.2 SQL的查询、更新和删除语句

一、 数据查询 SQL提供SELECT语句用于查询&#xff0c;一般格式为&#xff1a; 根据WHERE子句条件表达式从FROM子句指定的基本表、视图中找出满足条件的元组 GROUP BY语句则用作将结果按照<列名1>的值进行分组&#xff0c;该属性列值相等的元组为一个组&#xff1b;ORD…

Essential C++第五章习题

目录 5.1 5.2 5.3 5.4 5.1 C代码&#xff1a; //Stack.h#include<vector> #include<string> #include<iostream> using namespace std;#pragma once#ifndef _STACK_H_ #define _STACK_H_typedef string elemType;class Stack { public://基类的析构函数…

【JavaSE专栏5】Java 基本数据类型和取值范围

作者主页&#xff1a;Designer 小郑 作者简介&#xff1a;Java全栈软件工程师一枚&#xff0c;来自浙江宁波&#xff0c;负责开发管理公司OA项目&#xff0c;专注软件前后端开发&#xff08;Vue、SpringBoot和微信小程序&#xff09;、系统定制、远程技术指导。CSDN学院、蓝桥云…

Mine Goose Duck 0.2版本发布

本次我增加了模组的1.16.5和1.18.2的适用版本&#xff0c;新增了一些职业和装扮 1.新职业 1.冒险家 你不会死于摔伤、溺水、火烧、冰冻。 2.工程师 你可以修改888范围内红石设备的状态。 3.模仿者 怪物认为你是他们的一员。 4.加拿大鹅 你会自动报警并召唤警车。 5.…

深度卷积对抗神经网络 基础 第三部分 (WGAN-GP)

深度卷积对抗神经网络 基础 第三部分 (WGAN-GP&#xff09; Wasserstein GAN with Gradient Penalty (WGAN-GP) 我们在训练对抗神经网络的时候总是出现各种各样的问题。比如说模式奔溃 (mode collapse)和 梯度消失&#xff08;vanishing gradient&#xff09;的问题。 比如说…

在linux下安装docker

文章目录 目录 文章目录 前言 一、docker 二、使用步骤 1.环境准备 2.安装 三、配置阿里云镜像加速 四、卸载 总结 前言 一、docker 镜像&#xff08;image&#xff09;&#xff1a; docker镜像就好比是一个模板&#xff0c;可以通过这个模板来创建容器服务&#xff0c;tomc…

【攻坚克难】详解k8s持久化存储数据pv、pvc存储问题

问题 如图:pod中的容器,创建一个包含文件的目录,重启pod或系统重启后,此目录及其文件都会丢失,如何保证其不会丢失? 图 1 创建包含文件的目录 方法 分析:用pv、pvc为k8s持久化存储数据是最好的选择,可解决上述问题。流程:pv → pvc → pod把创建的目录挂载到pvc上步…

路由 OSPF 优化(FA地址、路由汇总、路由过滤、区域认证、接口认证)

1.2.0 路由 OSPF 优化&#xff08;FA地址、路由汇总、路由过滤、区域认证、接口认证&#xff09; 一、FA地址 该文章介绍的FA地址说辞简单易懂&#xff1a;路由协议系列之六&#xff1a;OSPF FA地址 产生条件 ASBR在其连接外部网络的接口&#xff08;外部路由的出接口&#xf…

CS61A 2022 fall HW 01: Functions, Control

CS61A 2022 fall HW 01: Functions, Control 文章目录CS61A 2022 fall HW 01: Functions, ControlQ1: A Plus Abs BQ2: Two of ThreeQ3: Largest FactorQ4: HailstoneHW01对应的是Textbook的1.1和1.2 Q1: A Plus Abs B 题目&#xff1a; Fill in the blanks in the following f…

Java | 解决并发修改异常问题【CurrentModificationException】

今日碰到Java中的一个异常&#xff0c;名为CurrentModificationException&#xff0c;从属于RunTimeException运行时异常&#xff0c;故作此记录 异常解析 首先来说明一下什么是【并发修改异常】❓ 因为迭代器依赖集合而存在&#xff0c;因为当你在操作集合中元素的时候&#…

springboot中restful风格请求的使用

springboot中restful风格请求的使用restful风格springboot中的使用1.创建html表单页面2.在yml配置文件中开启rest表单支持3.编写controller层及对应映射处理4.启动服务&#xff0c;逐个访问restful风格 Rest风格支持&#xff08;使用HTTP请求方式动词来表示对资源的操作&#…