css-3D转换

最新推荐文章于 2024-10-08 18:21:13 发布
最新推荐文章于 2024-10-08 18:21:13 发布
阅读量408 收藏 4
点赞数 2
分类专栏： 前端 文章标签： css html5 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39111074/article/details/119904800
版权

3D位移

写法1：

transform: translate3d(x, y, z);
translate3d(x, y, z) 中的 x, y, z 分别代表 x轴, y轴, z轴 正方向位移量。x,y,z不可以省略，没有的话写0

默认情况下:
x轴正方向 》向右,
y轴正方向 》向下,
z轴正方向 》从电脑屏幕向眼睛方向，向外

向Z轴正方向移动，靠近眼镜，视觉效果物体变大，
向Z轴负方向移动，远离眼镜，视觉效果物体变小，

正值代表向正方向移动，复制代表向负方向移动
transform: translate3d(x, y, z);是简写方式，也可以这样写：

写法2：

transform: translateX(X) translateY(Y) translateZ(Z)；每个中间空格隔开，或者每个单独写：

写法3：

transform: translateX();
transform: translateY();
transform: translateZ();

注意：translateX() translateY() 里面可以写像素PX、百分比，百分比是根据自身的宽高的百分比，常使用百分比位移来使盒子水平垂直居中，但是translateZ()里面单位只能是像素PX

3D旋转

transform: rotateX(deg)；- - -根据X轴旋转
transform: rotateY(deg)；- - -根据y轴旋转
transform: rotateZ(deg)；- - -根据z轴旋转

transform: rotate3d(x, y, z，deg)；- - -根据自由轴旋转，x,y,z不可以省略，deg代表旋转度数

透视和3D呈现

3D效果的呈现不仅要书写以上的3d位移和旋转属性，要加上透视和3D呈现属性才能生效

透视：perspective: *px; - - - 单位是px,加在要观察的元素的父级及以上盒子上，加多少像素可以自己调试

3D呈现：transform-style: preserve-3d; - - - 加在父盒子上，这样里面的子盒子也有3D效果

示例

示例1：

<!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>两面翻盒子</title>
    <style>
        body {
            perspective: 400px;
        }
        
        .box {
            position: relative;
            width: 200px;
            height: 200px;
            margin: 100px auto;
            transition: all 2s;
            /* 给父级添加，让子盒子保留立体空间 */
            transform-style: preserve-3d;
        }
        
        .box:hover {
            transform: rotateY(180deg)
        }
        
        .box div {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            text-align: center;
            line-height: 200px;
            border-radius: 50%;
        }
        
        .box div:nth-child(1) {
            background-color: pink;
            z-index: 1;
        }
        
        .box div:nth-child(2) {
            background-color: green;
            transform: rotateY(180deg);
        }
    </style>
</head>

<body>
    <div class="box">
        <div>吃苹果？</div>
        <div>吃榴莲？</div>
    </div>
</body>

</html>

原理：
两个子盒子定位到父盒子里面同样位置，将第二个盒子进行围绕Y轴180度的旋转，和第一个盒子背靠背，第一个盒子的层级设为1，压住第二个盒子显示，鼠标移动到父盒子上时，整个父盒子围绕Y轴旋转

页面效果：
两面翻盒子.gif

示例2：

<!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导航栏</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        ul {
            margin: 100px;
        }
        
        ul li {
            float: left;
            list-style: none;
            width: 100px;
            height: 35px;
            margin: 0 5px;
            perspective: 500px;
        }
        
        .box {
            position: relative;
            width: 100%;
            height: 100%;
            transform-style: preserve-3d;
            transition: all 1s;
        }
        
        .box:hover {
            transform: rotateX(90deg);
        }
        
        .box div {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            line-height: 35px;
            text-align: center;
        }
        
        .box div:nth-child(1) {
            transform: translateZ(17.5px);
            z-index: 1;
            background-color: pink;
        }
        
        .box div:nth-child(2) {
            transform: translateY(17.5px) rotateX(-90deg);
            background-color: green;
        }
    </style>
</head>

<body>
    <ul>
        <li>
            <div class="box">
                <div>春</div>
                <div>种</div>
            </div>
        </li>
        <li>
            <div class="box">
                <div>夏</div>
                <div>长</div>
            </div>
        </li>
        <li>
            <div class="box">
                <div>秋</div>
                <div>收</div>
            </div>
        </li>
        <li>
            <div class="box">
                <div>冬</div>
                <div>藏</div>
            </div>
        </li>
    </ul>
</body>

</html>

原理：
第二个盒子向Y轴正方向向下移动盒子一半的距离，然后围绕X轴向外翻转90度，使字朝下，第一个盒子向Z轴正方向移动，向外移动盒子一半的距离，这样父盒子围绕X轴旋转的中心线及时两个子盒子组成的盒子空间中心轴，然后设置鼠标移动到父盒子上时围绕X轴旋转

页面效果：
3D导航.gif

示例3：

<!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>旋转木马案例</title>
    <style>
        body {
            perspective: 1200px;
        }
        
        section {
            position: relative;
            width: 300px;
            height: 300px;
            margin: 200px auto;
            transform-style: preserve-3d;
            /* 使用动画 */
            animation: move 30s linear infinite;
        }
        /* 定义动画 */
        
        @keyframes move {
            0% {}
            100% {
                transform: rotateY(360deg)
            }
        }
        
        section:hover {
            animation-play-state: paused;
        }
        
        section div {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url(images/dog.jpg) no-repeat;
        }
        
        section div:nth-child(1) {
            transform: translateZ(300px);
        }
        
        section div:nth-child(2) {
            transform: rotateY(60deg) translateZ(300px);
        }
        
        section div:nth-child(3) {
            transform: rotateY(120deg) translateZ(300px);
        }
        
        section div:nth-child(4) {
            transform: rotateY(180deg) translateZ(300px);
        }
        
        section div:nth-child(5) {
            transform: rotateY(240deg) translateZ(300px);
        }
        
        section div:nth-child(6) {
            transform: rotateY(300deg) translateZ(300px);
        }
        
        section div:nth-child(7) {
            width: 100%;
            height: 100%;
            background: url(images/cat1.jpg) no-repeat;
        }
    </style>
</head>

<body>
    <section>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </section>

</body>

</html>

原理：
外层的6个图片，第一个向Z轴正方向向外移动一段距离，从第二个图片开始到户外层最后一个图片，都先围绕Y轴旋转一定度数，然后向Z轴正方向移动一段距离，外层图片向Z轴移动距离一致，围绕Y轴旋转的度数是360度 除以 图片的张数，我这里是6张图，所以依次旋转 60° 120° 180° 240° 300°
然后里面我也放了一张图，这张图不用做处理，
给父盒子设置动画，进行360的循环旋转，鼠标移动到父盒子上时停止旋转，鼠标移开后又继续旋转

页面效果：
旋转木马3.gif

旋转时度数的正负判断

使用左手法则，大拇指和其余4指呈直角状态，4手指向手掌心方向弯曲，手背朝向自己的脸部，大拇指指向要围绕旋转的轴的正方向，
如果旋转方向时跟4手指弯曲的方向一致，则是正值；反方向，则是负值

CSS函数: translate、translate3d的使用
胖蔡叨叨叨
06-05 2209
和函数可以实现元素在指定轴的平移的功能。函数使用在CSS转换属性transform的属性值。
CSS3 transition过渡，transform2D移动 translate 旋转 rotate 缩放 scalse， animation动画，.transform: translate3d详解
weixin_42270374的博客
08-05 1643
filter:函数() <title>Document</title> <style> img{ filter:blur(5px); } img:hover{ filter:blur(0); } </style> </head> <body> <!--filt...
移动web复习第二天
weixin_45650436的博客
12-05 406
空间转换3D 目标：使用transform属性实现元素在空间内的位移、旋转、缩放等效果 1.3D坐标系 3D 坐标系比2D 多了一个Z轴。 一定要记住3个坐标轴取值的正反： X 轴 往右越大，是正值， 否则反之 Y 轴 往下越大，是正值，否则反之 Z轴 往里越大，是正值，否则反之 Z轴指向我们 2.3D位移 /*完整写法*/ transform: translate3d(x, y, z); /*分开写法*/ transform: trans...
css中translate3d的使用
m0_59006402的博客
07-19 2705
tranform: translate3d(x,y,z) 这三个参数代表的含义: transform: translateX(100px) 仅在x轴上移动 transform: translateY(100px) 仅在y轴上移动 transform: translateZ(100px) 仅在z轴上移动 transform: translate3d(x,y,z) xyz分别代表要移动的轴的方向的距离 这个动画是从下往上的,代码如下: transform: ...
transform 平面转换（3d）
qq_50260510的博客
03-13 2516
使用transform属性实现元素在空间内的位移、旋转、缩放等效果。是从坐标轴角度定义的。x 、y 和z三条坐标轴构成了一个立体空间，z轴位置与视线方向相同。2.transform: translateX(值);3.transform: translateY(值);4.transform: translateZ(值);1.正负均可2.像素单位数值3.百分比。
HTML5CSS3（translate3d）
illion booked
05-27 1322
cHTML5 第三天 一、 认识 3D 转换 3D 的特点 近大远小 物体和面遮挡不可见 三维坐标系 x 轴：水平向右 – 注意：x 轴右边是正值，左边是负值 y 轴：垂直向下 – 注意：y 轴下面是正值，上面是负值 z 轴：垂直屏幕 – 注意：往外边的是正值，往里面的是负值 ​ 二、3D 转换 3D 转换知识要点 3D 位移：translate3d(x, y, z) 3D 旋转：rotate3d(x, y, z) 透视：perspctive 3D呈现 tran
CSS-3D悬停相册动画
03-21
1. **3D转换基础** - `transform-style: preserve-3d;`：此属性确保子元素在3D空间中保持它们的3D结构，而不是扁平化。 - `perspective`: 设置观察者的视距，影响3D元素的深度感。 - `backface-visibility: ...
CSS-3d-Image-Hover-Effect-Source-Code-With-Images-css source code
03-25
1. **CSS3 3D转换**：CSS3引入了2D和3D转换属性，如`transform`，可以对元素进行旋转(`rotateX`, `rotateY`, `rotateZ`)、缩放(`scaleX`, `scaleY`, `scaleZ`)、平移(`translateX`, `translateY`, `translateZ`)等...
pure-3d-css-cube-animations
05-26
在Web开发中，利用CSS3的3D转换功能可以创建出各种复杂的视觉效果，其中包括3D立方体旋转、翻转等动画。这种技术无需JavaScript或其他框架，只需CSS就能实现，因此对性能优化和页面加载速度有积极影响。 描述 "纯3d...
css-transform：CSS转换游乐场。 用于可视化2D和3D CSS3转换功能的在线工具
01-28
CSS3转换函数游乐场。 使用 ， 和构建的演示UI。 通过部署 发展历程 —安装 克隆或存储库并安装依赖项 $ git clone https://github.com/alterebro/css-transform.git $ cd css-transform/ $ npm install —服务 ...
CSS3-3D转换
weixin_49455047的博客
11-26 3009
目录 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轴：垂直屏幕 注意：往外面是正值，往里面是负值 .
CSS之3D转换（translate3d，透视perspective，旋转rotated3，transform-style)
m0_61547956的博客
04-08 7928
1、translate3d 在浏览器中，y轴正方向垂直向下，x轴正方向水平向右，z轴正方向指向外面。 z轴越大离我们越近，即看到的物体越大。z轴单位一般是px。z轴说物体到屏幕的距离。 /* transform: translate3d(100px, 100px, 100px); x,y不能省略写，不想要就写0。 2、透视perspective 透视又称视距，人的眼睛到屏幕的距离，距离视觉点越近在电脑上成像越大。 根据近大远小，物体遮挡后面看不见的原理。 透视写在被观察元素的父盒子上，透视越小
CSS-transform【下】(3D转换)【看这一篇就够了！！！】
zheshiyangyang的博客
09-06 1791
位移变换函数：translate(x,y)、 translateX(x) 、 translateY(y) 、 translateZ(y)x,y 的值为单位长度，可以是 px、百分比z 的值只能为 px 长度单位。translate(x) 同等于 translate(x,0);缩放变换函数：scale(x,y) 、scaleX(x)、 scaleY()x,y 的值为数字，分别表示宽度和长度的缩放比例scale(x) 表示 y 的值和 x 一样大，实现等比缩放。
还不知道transform 3D转换怎么用？看这个就够了
欢迎访问我的主页：https://www.bookbook.cc
03-21 9347
还不知道transform 3D转换怎么用？看这个就够了
CSS 3D转换
最新发布
2401_82561004的博客
10-08 1696
在 CSS 中，除了可以对页面中的元素进行外，您也可以对象元素进行3D转换（将页面看作是一个三维空间来对页面中的元素进行移动、旋转、缩放和倾斜等操作）。与 2D 转换相同，3D转换同样不会影响周围的元素，而且可以与其它元素重叠。但是，变换后的元素任然会占用其默认位置（未变换前）的空间。
CSS3的transform之3d转换、CSS3动画
m0_46324704的博客
07-18 2725
transform的3d转换和动画的基本使用方法
CSS3学习笔记（5）——transform 的3d变换
weixin_41309331的博客
07-24 751
在CSS3中，我们可以用一个三维坐标系来表示一个3d空间： 其中，z轴指向的是屏幕向外。 要实现3d的移动、缩放、旋转，也需要用到 transform样式。 三维移动 transform: translate3d(x, y, z); 其中x、y、z分别表示x、y、z方向上的偏移像素值。 也可以分开写：translateX(x)、translateY(y)、translateZ...
CSS3之3D转换
LQlove1的博客
12-23 1942
3D移动在2D移动的基础上多加了一个可以移动的方向，就是z轴方向。内容里有旋转木马的案例
CSS -- CSS3中3D转换相关属性讲解（translate3d，rotate3d，perspective，transform-style）
Qlz的博客
12-22 5983
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转换技术：3D-css-camera.zip
### 知识点一：CSS3 3D转换 在网页设计领域，CSS3引入的3D转换功能极大地丰富了网页视觉表现。通过CSS3的3D转换，开发者可以实现元素在三维空间中的位置和角度变换，从而创造出更生动的用户界面和交互效果。 - **...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值