html,坐标轴现实矩形旋转,css translate/rotate 空间坐标轴

最新推荐文章于 2023-04-21 16:25:21 发布
最新推荐文章于 2023-04-21 16:25:21 发布
阅读量708 收藏 2
点赞数
文章标签： html 坐标轴现实矩形旋转

translate三维坐标图：

43f3bcd07dc55ab4b51183324bff9020.png

rotate判断：

正向轴对着眼睛，顺时针则旋转角度为正，逆时针则旋转角度为负。

或者用左手法则也行：伸出左手，大拇指指向正轴方向，四个手指的指向即是旋转正向，但务必记住是左手！

注：rotate后三维坐标轴也会跟着改变

例——正方体相册

效果：

58180d596056857a4f5fe9cbe4d5865a.gif

html:

旋转立方体相册

1.jpg

2.jpg

3.jpg

4.jpg

5.jpg

1.jpg

2.jpg

3.jpg

4.jpg

5.jpg

1.jpg

2.jpg

1.css:

* {

padding: 0;

margin: 0;

}

body {

width: 100%;

height: 100%;

perspective: 500px;//元素被查看位置的视图,值越大，代表“眼睛离观察物越远”，值越小，代表“眼睛越靠近观察物”

background: linear-gradient(darkred 0%, black 100%);

}

#react {

width: 200px;

height: 200px;

margin: 200px auto;

transform-style: preserve-3d;//支持3d图像显示

animation: rotate 20s infinite;

animation-timing-function: linear;

}

#react div {

position: absolute;

transition: all .4s;

}

div .out_pic {

width: 200px;

height: 200px;

opacity: 0.9;

}

div .in_pic {

width: 100px;

height: 100px;

}

#react span {

display: block;

position: absolute;

width: 100px;

height: 100px;

top: 50px;

left: 50px;

}

@keyframes rotate {

from {

transform: rotateX(0deg) rotateY(0deg);

}

to {

transform: rotateX(360deg) rotateY(360deg);

}

}

.out_front {

transform: translateZ(100px);

}

.out_back {

transform: translateZ(-100px);

}

.out_left {

transform: rotateY(90deg) translateZ(100px);

}

.out_right {

transform: rotateY(-90deg) translateZ(100px);

}

.out_top {

transform: rotateX(90deg) translateZ(100px);

}

.out_bottom {

transform: rotateX(-90deg) translateZ(100px);

}

.in_front {

transform: translateZ(50px);

}

.in_back {

transform: translateZ(-50px);

}

.in_left {

transform: rotateY(90deg) translateZ(50px);

}

.in_right {

transform: rotateY(-90deg) translateZ(50px);

}

.in_top {

transform: rotateX(90deg) translateZ(50px);

}

.in_bottom {

transform: rotateX(-90deg) translateZ(50px);

}

/*外面的图片散开*/

#react:hover .out_front {

transform: translateZ(200px);

}

#react:hover .out_back {

transform: translateZ(-200px);

}

#react:hover .out_left {

transform: rotateY(90deg) translateZ(200px);

}

#react:hover .out_right {

transform: rotateY(-90deg) translateZ(200px);

}

#react:hover .out_top {

transform: rotateX(90deg) translateZ(200px);

}

#react:hover .out_bottom {

transform: rotateX(-90deg) translateZ(200px);

}

/*里面的图片散开*/

#react:hover .in_front {

transform: translateZ(100px);

}

#react:hover .in_back {

transform: translateZ(-100px);

}

#react:hover .in_left {

transform: rotateY(90deg) translateZ(100px);

}

#react:hover .in_right {

transform: rotateY(-90deg) translateZ(100px);

}

#react:hover .in_top {

transform: rotateX(90deg) translateZ(100px);

}

#react:hover .in_bottom {

transform: rotateX(-90deg) translateZ(100px);

}

iOS 2D绘图详解(Quartz 2D)之Transform(CTM,Translate,Rotate,Scale)

前言:Quartz默认采用设备无关的user space来进行绘图,当context(画板)建立之后,默认的坐标系原点以及方向也就确认了,可以通过CTM(current transformation ...

CSS学习笔记2-2d变换和过渡属性

前言:今天又是一个周末,心情不错,趁着闲暇之余,把剩下来的CSS3学习的内容全部整理出来,练习用的源码也稍微整理了一下. 2D转换 transform:translate||rotate||scale ...

css属性的选择对动画性能的影响

现在手机的占比越来越高,各种酷炫页面层出不穷,这些特效都离不开css动画.说到css动画,主流的情况也就无非这两大类:位移和形变.而我们在写一个动画特效的过程中,如何去提升它的性能呢?当然首先我们需要 ...

canvas/CSS实现仪表盘效果

手机上看比较虚

CSS 实现加载动画之一-菊花旋转

最近打算整理几个动画样式,最常见的就是我们用到的加载动画.加载动画的效果处理的好,会给页面带来画龙点睛的作用,而使用户愿意去等待.而页面中最常用的做法是把动画做成gif格式,当做背景图或是img标签来 ...

css知识总结

---# 学习目标:> 1. 学会使用CSS选择器> 2. 熟记CSS样式和外观属性> 3. 熟练掌握CSS各种选择器> 4. 熟练掌握CSS各种选择器> 5. 熟练掌握 ...

前端性能优化(css动画篇)

正巧看到在送书,于是乎找了找自己博客上记录过的一些东西来及其无耻的蹭书了~~~ 小广告:更多内容可以看我的博客 最近拜读了一下html5rocks上几位大神写的一篇关于CSS3动画性能优化的文章,学到 ...

canvas/CSS仪表盘效果

...

随机推荐

C#-WebForm-WebForm开发基础、如何给控件注册事件？——事件委托写法、http无状态性、三层结构

(小知识 - xml:可扩展的标记语言 html:超文本标记语言) 一.创建WebForm:新建→网站 此时文件夹中只有一个 config 文件,打开后 二.在项目下右键添加新项 在设计页面中打开 从 ...

C++基础练习题(一)： 查找最短单词

/* 编程实现将字符串中最短的单词输出,在主函数中输入字符串,编写一个函数完成最短单词的查找 说明>*/ #include #inclu ...

编译过程中，termcap.h 文件找不到路径 licli.a终于生成

编译过程中,termcap.h      文件找不到路径   查看是linux  源码下找不到termcap.h文件   安装了所有关于*cap*的源码包也不起作用     今天终于解决了这个问题,搜 ...

PHP基础 CGI，FastCGI，PHP-CGI与PHP-FPM

CGI CGI全称是“公共网关接口”(Common Gateway Interface),HTTP服务器与你的或其它机器上的程序进行“交谈”的一种工具,其程序须运行在网络服务器上. CGI可以用任何一 ...

selinux理解1-selinux介绍

安全增强式Linux(SELinux, Security-Enhanced Linux)是一种强制访问控制(mandatory access control)的实现.它的作法是以最小权限原则(prin ...

vlc_input buffer管理 & 时钟同步(转)

vlc_input buffer管理 & 时钟同步 一.背景1.当播放网络视频流时(比如udp视频流),发送方(编码)和接收方(解码)是并行操作的,如果发送太慢(或因为网络原因出现延迟)的话, ...

CodeForces 146E - Lucky Subsequence DP+扩展欧几里德求逆元

题意: 一个数只含有4,7就是lucky数...现在有一串长度为n的数...问这列数有多少个长度为k子串..这些子串不含两个相同的lucky数... 子串的定义..是从这列数中选出的数..只要序号不同 ...

根据XPATH去查看修改xml文件节点的内容

首先给出xml文件解析的路径,然后去读取节点的内容. package com.inetpsa.eqc.threads; import java.util.List; import java.io.Fi ...

Codeforces#355

大小号刷题,大号,被查重,悲剧,最后小号过了3题 A题: 分析:大于h的+2,小于等于h的+1 #include #include #i ...

芝士的草原
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
从css 3d说到空间坐标轴附
12-14
当时是用了一个steps属性+雪碧图来制作帧动画，这当然颇为不错，但其实一开始我想的不是这样的，我想的是用真的3d和动画去做，这个方案涉及到不少空间的知识，今天来给大伙好好说说，这css 3d到底怎么玩。...
机器视觉2D点旋转中心标定及旋转后坐标计算
jiangxing11的博客
07-23 1万+
机器视觉2D点旋转中心标定及旋转后的坐标计算一、旋转中心标定二、点旋转后的坐标计算 我们在做机器视觉项目时，尤其是与机械臂的视觉应用中，会经常遇到旋转中心，旋转坐标计算等问题。现将本人在机械臂的相关视觉经验分享给大家，如果有错误的地方也请各位专家进行指出。 一、旋转中心标定 1、在进行旋转中心标定之前，首先得进行机械臂的手眼标定，标定完成之后，所有图像点转换到世界坐标系下进行计算。 2、目前旋转中心标定方法只测试过眼在手外的情况，即：相机固定，机械臂抓取某个带特征（如圆心，角点）的物体，在示教位置进行&
计算旋转后的坐标
u011500419的专栏
10-31 980
计算一个点 围绕 一个中心坐标旋转一定角度后的坐标
关于transform的一些拓展
IOT123的博客
11-02 221
一、盒子transform后对周围盒子的影响 代码： <style> .box1, .box2 { width: 300px; height: 300px; } .box1 { background: #000; transform: translateX(100px) translateY(100px); }..
【CSS3】CSS3 2D 转换 - translate 平移 ( transform: translate 样式 | 百分比移动相对于元素自身尺寸 | 百分比移动实现绝对定位的居中效果 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
04-21 3531
一、CSS3 2D 转换 - 位移 / 旋转 / 缩放 二、CSS 2D 转换 - Translate 移动 三、Translate 移动代码示例 1、基本示例 2、脱标测试 ( 百分比平移 ) 四、Translate 百分比移动实现绝对定位的居中效果 1、传统实现方式代码示例 2、百分比移动实现绝对定位的居中效果代码示例
CSS中的transform（二维变换）
热门推荐
Code6E的博客
03-24 1万+
案例来自pink老师教程，自己做了一些总结和优化，侵权删。原教程链接https://www.bilibili.com/video/BV14J4114768?p=357
tableaudesktop制作动态坐标轴范围
最新发布
12-14
资源包含tableaudesktop制作的动态坐标轴范围相关的twbx源文件，有需要的小伙伴可以下载使用
Python处理时间日期坐标轴过程详解
01-01
当日期数据作为图表的坐标轴时通常需要特殊处理，应为日期字符串比较长，容易产生重叠现象 2. 设定主/次刻度 2.1 引用库 from matplotlib.dates import DateFormatter, WeekdayLocator, DayLocator, MONDAY,...
Python利用matplotlib做图中图及次坐标轴的实例
09-19
今天小编就为大家分享一篇Python利用matplotlib做图中图及次坐标轴的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
matlab pro-1_matlab去掉x轴_坐标刻度_
10-01
如何去除右侧Y轴和顶部X轴上的刻度标记?避免设置(gca，'ytick'，[])，并从y轴上删除刻度标记。只删除单侧轴的刻度标记
html transform属性,CSS3 transform 属性详解
weixin_31981135的博客
06-04 324
Transform 属性css3 中 transfrom 属性用户元素空间位置的变换。本文结果中展示的画面都是基于下图进行的变换二维变换Matrix3x3 的变换矩阵对二维向量进行转换其中 x1、y1 为经过 Matrix 转换后的向量。由公式可知，Matrix 中 e, f 主要用于设置元素在 X轴和 Y轴上的平移。a, d 主要用于设置元素在 X轴和 Y轴上的缩放。a,b,c,d 用于设置元素...
html中坐标轴旋转角度,CSS3 旋转rotate()rotatex()rotatey()应用实例
weixin_29190651的博客
06-03 6058
CSS3中，对象转换有多种方式，其中一种为旋转rotate()，主要是围绕X轴或Y轴旋转，所以rotate()又要细分为rotatex()和rotatey()，前者用于设置对象围绕X轴旋转，后者用于设置对象围绕Y轴旋转。rotate既可控制对象作2D旋转，又可控制对象作3D旋转，本篇先介绍作2D旋转的语法规则和应用实例，后续篇章再介绍作3D旋转的情况。下面先看rotatex()、rotatey()...
JAVA 关于rotate()以后坐标以及显示的问题
xdzcz的专栏
04-29 3696
旋转整个Graphics所代表的坐标系
HDU 4998 Rotate(绕一点旋转坐标轴)
ftx456789的博客
05-06 387
Rotate Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others) Total Submission(s): 1402 Accepted Submission(s): 630 Special Judge Problem Description Noting is mor...
css translate 坐标,CSS3中translate、transform和translation的区别和联系
weixin_39861624的博客
08-03 415
这几天一直在研究手机中的菜单的弹出效果，这么在CSS3中发现了几个属性,当然这几个属性也可以实现更多的效果，可以另网页绚丽起来，不过还得先记录下来，以后可以更好的翻阅查找，就当是一个笔记吧！translate:移动，transform的一个方法通过 translate() 方法，元素从其当前位置移动，根据给定的 left(x 坐标) 和 top(y 坐标) 位置参数：用法transform:tr...
CSS3转换 transform
qq_52301431的博客
04-01 676
目录 一、CSS3转换 transform 2D转换 translate() 平移 rotate() 旋转 scale() 放大缩小 skew() 倾斜 3D转换 1、rotateX(80deg)：正值向上翻转 2、rotateY(180deg)：正值向右翻转 3、translateZ(100px)：正值向前，负值向后 透视原理： 近大远小 。 一、CSS3转换 transform CSS3 转换是使元素改变形状、尺寸和位置的一种效果。 转换可以对元素进行 移动tran
css3基础知识点--transform 3D变换
阿俊的博客
07-04 847
接上一篇 5、perspective 设置透视距离 6、transform-style flat | preserve-3d 设置盒子是否按3d空间显示 7、translateX、translateY、translateZ 设置三维移动 8、rotateX、rotateY、rotateZ 设置三维旋转 9、scaleX、scaleY、scaleZ 设置三维缩放 10、tranform-origi...
rotate函数css,CSS3函数rotate()怎么使用
weixin_29762229的博客
08-03 4496
我们都知道，在css3里rotate()函数是能够旋转元素的，他主要是在二维空间内进行旋转操作，那么今天我们就给大家带来实例，看一下这个rotate()函数怎么使用。如果对元素本身或者元素设置了perspective值，那么rotate3d()函数可以实现一个3维空间内的旋转。关联属性：transform-origin。取值rotate();为一个角度值，单位deg，可以为正数或者负数，正数是顺时...
css元素转换(旋转函数、rotateX 和 rotateY 的使用、移动函数、缩放函数、过渡、动画)详解
Argonaut_的博客
01-05 1万+
页面上有两个 div 元素块，使用 transform: translateX(20px) 让第一个元素块向 X 轴移动 20 个像素；使用 transform: translateY(30px) 让第二个元素块向 Y 轴移动 30 个像素。在上面代码中，用 steps 的方式将 div 元素分成四步，使元素的面积逐渐变成原来的 2 倍，当鼠标从元素上移开，又会以四步的形式将元素还原成原有的大小。接下来给大家介绍一下 transition-timing-function 属性的取值吧！
plot (x, y2）设置x坐标轴刻度为0到pi/3
06-01
您可以使用Matplotlib库来绘制图形，并使用xticks()函数来设置x坐标轴刻度。下面是一个示例代码： ``` import matplotlib.pyplot as plt import numpy as np x = np.linspace(0, np.pi/3, 100) y2 = np.sin(x) plt.plot(x, y2) plt.xticks(np.linspace(0, np.pi/3, 4)) # 设置x坐标轴刻度为0到pi/3，共4个刻度 plt.show() ``` 这将绘制一个正弦曲线，并将x坐标轴刻度设置为0到pi/3，共4个刻度。您可以根据需要调整刻度数量和范围。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值