3D变形:平移、旋转、缩放

news/2024/11/28 19:04:31/

什么是3d转换

定义元素在三维空间移动、缩放、旋转

3d坐标轴(图示)

3D立体空间的3根轴线

  • x轴:水平,向右为正,向左为负

  • y轴:垂直,向下为正,向上为负

  • z轴:垂直于屏幕,向外为正,向内为负

1)3D必备属性

  • transform-style: preserve-3d; 创建3d空间

  • 什么时候搭建3d舞台?

    • 父元素有3D变形,子元素也有3D变形

  • perspective属性:景深(透视),属性值为透视点到元素的距离,近大远小;也可以让网页产生3D效果,单位像素

  • 一般取值:800px-1000px
    perspective:800px 就是人离屏幕800px 的地方观看这个div元素。
    当translateZ的大小临近与800px时图片离我们越来越近了
    当它大于800px时,这个图片就消失了
    ​
    反之当translateZ为负值时,我们可以看到图片变小了,也就是图片离人越来越远了。
  • preserve-3d, 如果搭配overflow: hidden/scroll/auto使用,相当于2D效果

transform-style属性和perspective属性放在父元素中,有时候perspective属性放在body中

2) 位移

  • transform: translateZ(z); 沿着z轴方向位移

  • transform: translate3d(x,y,z) 沿着x、y、z轴方向位移

    z指的是 z 轴的向量位移长度。当其值为负值时,元素在 Z 轴越移越远,导致元素变小。反之当值为正值时,

    其在 Z 轴越移越近,导致元素变得较大。

3) 旋转

  • transform: rotateX(a); 沿着x轴方向旋转

  • a 指的是一个旋转角度值,如果为正值,元素围绕X轴顺时针旋转;反之,如果为负值,元素围绕X轴逆时针旋转。

  • transform: rotateY(a); 沿着y轴方向旋转

  • a 指的是一个旋转角度值,如果为正值,元素围绕Y轴顺时针旋转;反之,如果为负值,元素围绕Y轴逆时针旋转。

  • transform: rotateZ(a); 沿着Z轴方向旋转

  • a 指的是一个旋转角度值,如果为正值,元素围绕 Z 轴顺时针旋转;反之,如果为负值,元素围绕 Z 轴逆时针

    旋转。

  • transform: rotate3d(x,y,z,angle);

  • 参数:

    x:是一个 0 到1之间的数值,主要用来描述元素围绕 X 轴旋转的矢量值。

    y:是一个 0 到1之间的数值,主要用来描述元素围绕 Y 轴旋转的矢量值。

    z:是一个 0 到1之间的数值,主要用来描述元素围绕 Z 轴旋转的矢量值。

    angle:一个角度值,指定在 3D 空间旋转角度,正值顺时针旋转,反之元素逆时。

4)缩放

  • transform: scaleZ() 沿着z轴方向缩放 (厚度)

  • transform: scale3d() 沿着x、y、z轴方向缩放

  • 取值

    • 默认值为1

    • 使用0~1之间的值缩小元素 使用超过1的值放大元素

  • 注意:scaleZ单独使用看不到效果,需要配合其他变换属性一起使用

transform: scaleZ(3);
transform: scale3d(2, 3, 3);

3D缩放Z轴演示


http://www.ppmy.cn/news/249767.html

相关文章

2D和3D转换

转换(transform) transform 是CSS3中具有颠覆性的特征之一,可以实现元素的位移、旋转、变形、缩放。 要想学好2D和3D转换要先对 坐标 有一定了解 2D 2维坐标系 2D转换中的 属性 在使用转换是我们要先给元素添加转换属性 transform(x,y)&…

3D视觉 之 线激光3D相机

3D视觉 之 线激光3D相机 飞鸢逐浪 专注于机器视觉、OpenCV、C编程 84 人赞同了该文章 1 3D 视觉 常见的三维视觉技术,包含双目、ToF、激光三角、结构光等,如下图: 1)毫米级 双目、ToF、结构光(散斑)的精度为 mm 级&#xff0…

2D转3D

(本文部分内容摘选自http://www.cnblogs.com/ImageVision/archive/2012/03/26/2418602.html,http://www.guokr.com/article/145897/) 第一,我们先看看所谓的3D和2D最大的区别是什么呢?没错,就是图片的深度…

3D照片旋转

前言 第一次写不知道写些啥,大学四年(PS:计算机专业),本人菜鸟是真的菜。 一、3D照片旋转 1、首先创建一个新的文件夹,再在里面创建一个新的文件来保存照片,然后我是参照该博主的https://blo…

3D到2D的转换方式

import SimpleITK as sitk import numpy as np import cv2 import os import glob import tqdmdef nifti2png(path):for file in tqdm.tqdm(glob.glob(os.path.join(path, "*"))): # *表示通配符,即path下面的所有文件都遍历一遍image sitk.ReadImage(f…

3D地图app

3D三维地图APP 发布时间:2018-07-19 版权: 3D地图依据高程数据等对地表进行渲染,实现地表的起伏,模拟出真实的三维场景,让你有如身临其境般的感觉。 (注:Bigemap 3D地图是一个三维地图浏览功能…

3D视觉之线激光3D相机

点击上方“3D视觉工坊”,选择“星标” 干货第一时间送达 作者丨飞鸢逐浪知乎 来源丨https://zhuanlan.zhihu.com/p/486516636 编辑丨3D视觉工坊 1 3D 视觉 常见的三维视觉技术,包含双目、ToF、激光三角、结构光等,如下图: 1&#…

2D及3D转换

转换 —— transform 目录 2D转换 移动 —— translate 旋转 —— rotate 缩放 —— scale 2D转换综合写法 设置转换中心点 3D转换 3D移动 —— translate3d 2D转换 —— rotate3d 透视 —— perspective 3D呈现 —— transform-style 练习 使盒子居中 旋转出内…