3D移动translate3d（CSS3）

最新推荐文章于 2024-04-01 07:39:11 发布
最新推荐文章于 2024-04-01 07:39:11 发布
阅读量246 收藏
点赞数
分类专栏： 前端 文章标签： css3 css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50569789/article/details/119710577
版权

3D移动translate3d（CSS3）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D移动translate3d
    </title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: skyblue;
            /*  transform: translateX(100px) translateY(100px) translateZ(100px); */
            /*  1.translateZ()沿着Z轴移动 */
            /* 2.translateZ() 后面的单位 px */
            /* 3.translateZ(100px) 向外移动100px (向我们的眼睛来移动的) */
            /*  4.3D转换的简写法 */
            /* transform: translate3d(x,y,z);  */
            transform: translate3d(100px, 100px, 100px);
            /* 5.里面的xyz不可以省略 ，如果没有就写0 */
        }
    </style>
</head>

<body>
    <div>

    </div>
</body>

</html>
不易撞的网名
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
CSS之3D转换（translate3d，透视perspective，旋转rotated3，transform-style)
m0_61547956的博客
04-08 7744
1、translate3d 在浏览器中，y轴正方向垂直向下，x轴正方向水平向右，z轴正方向指向外面。 z轴越大离我们越近，即看到的物体越大。z轴单位一般是px。z轴说物体到屏幕的距离。 /* transform: translate3d(100px, 100px, 100px); x,y不能省略写，不想要就写0。 2、透视perspective 透视又称视距，人的眼睛到屏幕的距离，距离视觉点越近在电脑上成像越大。 根据近大远小，物体遮挡后面看不见的原理。 透视写在被观察元素的父盒子上，透视越小
HTML5CSS3（translate3d）
illion booked
05-27 1255
cHTML5 第三天 一、 认识 3D 转换 3D 的特点 近大远小 物体和面遮挡不可见 三维坐标系 x 轴：水平向右 – 注意：x 轴右边是正值，左边是负值 y 轴：垂直向下 – 注意：y 轴下面是正值，上面是负值 z 轴：垂直屏幕 – 注意：往外边的是正值，往里面的是负值 ​ 二、3D 转换 3D 转换知识要点 3D 位移：translate3d(x, y, z) 3D 旋转：rotate3d(x, y, z) 透视：perspctive 3D呈现 tran
CSS -- CSS3中3D转换相关属性讲解（translate3d，rotate3d，perspective，transform-style）
Qlz的博客
12-22 4473
3D转换 1 三维坐标系 2 3D移动 translate3d 3 透视 perspective 4 3D 旋转 rotate3d 5 3D旋转 rotate3d 6 3D呈现 transform-style 7 3D案例 3D转换 我们生活的环境是3D的，照片就是3D物体在2D平面呈现的例子。 3D特点： 近大远小。 物体后面遮挡不可见 当我们在网页上构建3D效果的时候参考这些特点就能产出3D效果。 1 三维坐标系 三维坐标系其实就是指立体空间，立体空间是由3个轴共同组成的。 x轴：水平向右 注意
CSS3的3D转换translate3d(x,y,z)函数
热门推荐
Handsome_fan的博客
07-21 2万+
translate3d(x,y,z)只是规定3D转换的一种形式，此函数用来规定指定元素在三维空间中的位移。 语法结构: translate3d(x,y,z) 参数解析: 1.x:表示在x轴方向的位移。 2.y:表示在y轴方向的位移。 3.z:表示在z轴方向的位移。
css中translate3d的使用
m0_59006402的博客
07-19 2426
tranform: translate3d(x,y,z) 这三个参数代表的含义: transform: translateX(100px) 仅在x轴上移动 transform: translateY(100px) 仅在y轴上移动 transform: translateZ(100px) 仅在z轴上移动 transform: translate3d(x,y,z) xyz分别代表要移动的轴的方向的距离 这个动画是从下往上的,代码如下: transform: ...
CSS3 3D位移translate效果实例介绍
09-27
总结起来，CSS3的3D位移`translate3d`是增强网页动态效果的重要工具，它提供了在X、Y、Z三个维度上对元素进行位移的能力，结合`perspective`和`transform-style`等属性，可以创建出具有深度和立体感的网页交互界面。...
CSS-3D悬停相册动画
03-21
- `translate3d(x, y, z)`: 同时进行XYZ轴的平移。 4. **3D缩放** - `scaleX`, `scaleY`, `scaleZ`：沿X、Y、Z轴缩放元素大小。 - `scale3d(x, y, z)`: 用于同时缩放XYZ轴。 5. **CSS3D动画** - `transition`...
纯CSS3制作3D旋转球体
11-04
此外，`translate3d()`和`scale3d()`用于在3D空间中移动和缩放元素。 为了创建3D旋转球体，我们首先需要一个球体的2D表示，通常是一个圆形。我们可以使用`border-radius`属性将一个正方形边框转化为圆形。例如： `...
html+css+js 3D相册
04-20
利用CSS3的`transform`属性可以实现3D变换，如`rotateX`、`rotateY`、`rotateZ`用于控制元素的旋转，`translate3d`用于在3D空间中的移动。同时，`perspective`属性可以设置观察者的视点，产生立体效果。此外，CSS3的...
css3实现鼠标移入 3D卡片翻转
最新发布
07-24
CSS3 3D 变换：利用 transform 属性中的 rotate 和 translate 函数，实现卡片的 3D 翻转效果。 CSS3 过渡效果：使用 transition 属性平滑地过渡翻转动画，增强视觉效果。 伪元素：通过 ::before 和 ::after 伪元素...
CSS3之3D转换
LQlove1的博客
12-23 1836
3D移动在2D移动的基础上多加了一个可以移动的方向，就是z轴方向。内容里有旋转木马的案例
Css3——3D转换
weixin_45328723的博客
05-03 332
3D转换三维坐标系 三维坐标系其实就是指的立体空间，立体空间是由3个轴共同组成的。 x轴：水平向右 注意：x右边是正值，左边是负值 y轴：垂直个向下 注意：y下面是正值，上面是负值 z轴：垂直屏幕 注意：往外是正值，往里是负值 3D移动 translate3d 3D移动在2D移动的基础上多加了一个可以移动的方向，就是z轴方向 translform:translateX (100px):仅仅是在x轴上移动 translform:translateY (100px):仅仅是在y轴上移动 tra
CSS3 3D移动（translate3d）、透视（perspective）、3D旋转（rotate3d）、3D呈现（transform-style）
蟹黄堡
05-16 5500
3D移动translate3d transform: translateX(100px)：仅仅是在X轴上移动 transform: translateY(100px)：仅仅是在Y轴上移动 transform: translateZ(100px)：仅仅是在Z轴上移动（注意：translateZ一般都是用px单位） transform: translateX(100px) translateY(100px)：沿着X轴和Y轴同时移动 transform: translate3d(x,y,z)：在x，y，z轴上都
CSS3 transition 属性 translate3d rotate
blogscsdn的博客
08-17 4873
transition:width 2s; -moz-transition:width 2s; /* Firefox 4 */ -webkit-transition:width 2s; /* Safari and Chrome */ -o-transition:width 2s; /* Opera */ 必须加上            div:hover
CSS3：3D移动translate3d及3D转换透视效果perspective
weixin_46682277的博客
01-09 684
3D移动translate3d 3D移动在2D移动的基础上多加了一个可以移动的方向，就是轴方向。 transform:translateX(100px);仅在x轴上移动。 transform:translateY(100px);仅在y轴上移动。 transform:translateZ(100px);仅在z轴上移动(单位一般都用px，不用百分比)。 transform:translate3d(x,y,z);其中x、y、z分别指要移动的轴的方向的距离。 .box1 { width: 200
CSS3-3D转换
weixin_49455047的博客
11-26 2878
目录 1.1三维坐标系 1.2 3D移动translate3d 1.3 透视perspective 1.4 3D旋转 rotate3d 1.5 3D呈现 transform-style 2.1两面翻转盒子案例 3D导航栏 旋转木马 有什么特点 近大远小 物体后面遮挡不可见 1.1三维坐标系 x轴：水平向右 注意：x右边是正值，左边是负值 y轴：水平向下 注意：y下边是正值，上边是负值 z轴：垂直屏幕 注意：往外面是正值，往里面是负值 .
css3（3D转换）快来一起学习吧
m0_68359121的博客
04-25 233
空间转换 属性：transform 可以实现平移、缩放、旋转（也叫3D转换） X、Y、Z轴方向的确认 X：沿着屏幕从左往右即是X轴正方向 Y：沿着屏幕从上往下即是Y轴正方向 Z：沿着屏幕从里往外即是Z轴正方向 左手法则：判断旋转方向: 左手握住旋转轴, 拇指指向正值方向, 手指弯曲方向为旋转正值方向 视距（perspective） 属性：perspective 取值：像素单位数值， 数值一般在800 – 1200px 用法：为转换元素的父盒子添加，可达成近大远小 透视距离也称为视距，所谓
css3-----3D变换，前端开发入门到精通
2401_83977696的博客
04-01 963
在面试前我花了三个月时间刷了很多大厂面试题，最近做了一个整理并分类，主要内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。HTML5新特性，语义化浏览器的标准模式和怪异模式xhtml和html的区别使用data-的好处meta标签canvasHTML废弃的标签。
CSS3中3d转换与2d转换的区别（translate3d rotate3d）
KleyChan的博客
09-24 2746
3d转换 translate3d rotate3d 2d转换和3d转换区别： 多了一个参数表示3d 在移动端使用3d转换可以优化性能（如果设备有3d加速引擎 GPU 可以提高性能 , 2d转换是无法调用GPU） ...
translate3d
07-27
translate3d是一种CSS属性，用于在3D空间中对元素进行位移。它可以同时指定元素在X轴、Y轴和Z轴上的位移距离。\[1\]例如，使用translate3d(x, y, z)可以将元素在X轴上移动x个像素，在Y轴上移动y个像素，在Z轴上移动z个像素。这个属性可以用于创建3D效果，使元素在空间中移动或旋转。\[2\]另外，还可以使用translateX、translateY和translateZ属性分别在单个轴上进行位移。\[3\] #### 引用[.reference_title] - *1* *2* *3* [3D移动 translate3d](https://blog.csdn.net/m0_49471668/article/details/125472757)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

不易撞的网名

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值