transform 平面转换(3d)

这篇具有很好参考价值的文章主要介绍了transform 平面转换(3d)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、位移

1.原理: 使用transform属性实现元素在空间内的位移、旋转、缩放等效果。

2.空间: 是从坐标轴角度定义的。 x 、y 和z三条坐标轴构成了一个立体空间,z轴位置与视线方向相同。

3.语法:

1.transform: translate3d(x, y, z);

2.transform: translateX(值);

3.transform: translateY(值);

4.transform: translateZ(值);

4.取值:

1.正负均可

2.像素单位数值

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>3d位移</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body{
            /* /* 透视:调整眼睛到屏幕的距离;透视的值越小,眼睛到屏幕的距离就越小,看到的值就越大.反之亦然. 
            透视值推荐值 800-1200px;
            透视要给父元素添加
            近大远小,近实远虚,Z轴需要添加透视 */
            perspective: 800px;
            /* 透视和3D没有关系,只是为了看Z轴 */

        }
        .box{
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        body:hover .box{
            /* 3d位移  单独写法 */
            /* x轴:上负  下正 */
            transform: translateX(100px);
            transform: translateX(-100px);

            /* Y轴:上负   下正 */
            transform: translateY(100px);
            transform: translateY(-100px);

            /* Z轴:正值是面向自己,负值是自己的反方向 */
            transform: translateZ(100px);
            transform: translateZ(-100px);
       

        /* 3D位移的连写 */
        /* transform: translate3d(X轴,Y轴,Z轴); */


    }
        

    </style>
</head>
<body>
    <div class="box"></div>
    
</body>
</html>

二、透视

1.原理: 使用perspective属性实现透视效果。

2.属性:(添加给父级)perspective: 值;透视距离也称为视距,所谓的视距就是人的眼睛到屏幕的距离。

3.取值: 像素单位数值, 数值一般在800 – 1200。

4.作用:

(1)空间转换时,为元素添加近大远小、近实远虚的视觉效果;

(2)调整眼睛到屏幕的距离;透视的值越小,眼睛到屏幕的距离就越小,看到的值就越大.反之亦然;

(3)透视值推荐值 800-1200px;透视要给父元素添加;

(4)近大远小,近实远虚,Z轴需要添加透视;

(5)透视和3D没有关系,只是为了看Z轴。

5.注意: 透视的默认中心在屏幕中央,眼睛距离在页面中间,如果内容不在盒子中间则会出现倾斜的现象。解决方法就是要把内容放在页面中间,不然会显示变形

<!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>
        body{
            perspective: 800px;
        }
        .box{
            width: 200px;
            height: 200px;
            background-color: pink;
            margin: 0 auto;
            transition: all 2s;
        }
        body:hover .box{
            transform: translateZ(500px);
            background-color: aqua
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

三、旋转

1.原理: 使用rotate实现元素空间旋转效果。

2.语法:

(1)transform: rotateZ(值);

(2)transform: rotateX(值);

(3)transform: rotateY(值);

(4)连写:rotate3d(x, y, z, 角度度数) :用来设置自定义旋转轴的位置及旋转的角度。x,y,z 取值为0和1,0表示不围绕坐标轴旋转,1表示围绕坐标轴旋转。

(5)X轴正值是从上往下旋转,负值是从下往上旋转;

(6)Y轴正值是从左往右旋转,负值是从右往左旋转;

(7)Z轴正值是顺时针旋转,负值是逆时针旋转。

<!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>
        .box{
            position: relative;
            width: 500px;
            height: 400px;
            background-color: pink;
            margin: 100px auto;
        }

        .box img{
            width: 500px;
            height: 400px;
            transition: all 2s;
        }

        .box:hover img{
            /* 3d x轴:rotate 单位: deg度  turn圈 */
            /* X轴正值是从上往下旋转,负值是从下往上旋转 */
            /* transform: rotateX(180deg); */
            /* Y轴正值是从左往右旋转,负值是从右往左旋转 */
            /* transform: rotateY(180deg); */
            /* Z轴正值是顺时针旋转,负值是逆时针旋转 */
            /* transform: rotateZ(180deg); */

            /* 旋转的综合写法   transform: rotate3d(X,Y,Z,角度);
            x,y,z的取值范围是0和1;
            0表示不围绕坐标轴旋转,1表示围绕坐标轴旋转*/
            transform: rotate3d(0,1,1,45deg);
            /* 仅了解 */
        }

    </style>
</head>
<body>
    <div class="box">
        <img src="../2.素材/hero.jpeg" alt="">
    </div>
</body>
</html>

左手法则: 

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

transform: translate3d,HTML+CSS,平面,3d,html

<!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;
        }
        .box{
            position: relative;
            width: 200px;
            height: 200px;
            /* background-color: pink; */
            margin: 100px auto;
            /* 开启3d */
            transform-style: preserve-3d;
            transition: all 2s;
            
        }

        .box:hover{
            transform: rotateY(180deg);
        }

        .box div{
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: aqua;
        }

        .box .two{
            transform: translateZ(-100px);
            background-color: blueviolet;
        }

        .box .one {
            transform: translateZ(100px);
        }



    </style>

    <!-- 1.把三个盒子层叠在一起,使用定位-子绝父相;
         2.通过位移使盒子发生间隔;
         3.开启3d环境(推荐给父盒子);
         4.给父盒子添加向y轴的旋转方向; -->
</head>
<body>
    <div class="box">
        <div class="one">前面</div>
        <div class="two">后面</div>
    </div>
    
</body>
</html>

 

四、立体呈现

1.原理: 使用transform-style: preserve-3d呈现立体图形。

2.呈现立体图形步骤

(1)盒子父元素添加transform-style: preserve-3d;

(2)按需求设置子盒子的位置(位移或旋转);

(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>3d之导航栏</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            list-style-type: none;
            width: 1200px;
            margin: 100px auto;
        }
        ul li{
            position: relative;
            width: 120px;
            height: 40px;
            /* background-color: pink; */
            transform-style: preserve-3d;
            transition: all 1s;
        }

        ul li:hover{
            transform: rotateX(-90deg);

        }

        ul li span{
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 40px;
            text-align: center;
            line-height: 40px;
        }

        ul li span:first-child{
            background-color: greenyellow;
            transform: translateZ(20px);
        }

        ul li span:last-child{
            background-color: aqua;
            transform: translateY(-20px) rotateX(90deg);
        }
    </style>
    
    <!-- 1.首页用父相子绝的定位,使两个盒子叠在一起;
         2.把绿色的盒子往前移动父盒子的一半;(隔开距离)
         3.给推荐父元素添加3d效果;(transform-style:preserve-3d)
         4.给父盒子添加x轴旋转90度;
         5.给天蓝色盒子旋转90度;
         6.给天蓝色盒子往上y轴位移绿色盒子高度的一半;
        -->
</head>
<body>
    <ul>
        <li>
            <span>首页</span>
            <span>index</span>
        </li>
    </ul>
    
</body>
</html>

五、缩放

1.原理: 使用scale实现空间缩放效果。

2.语法:

(1)transform: scaleX(倍数);(scaleX可以理解为盒子的宽)

(2)transform: scaleY(倍数);(scaleY可以理解为盒子的高)

(3)transform: scaleZ(倍数);(scaleZ可以理解为面向自己的方向在进行放大,需要把盒子进行旋转)

(4)连写:transform: scale3d(x, y, z);(连写 transform: scale3d(X,Y,Z);值为倍数)文章来源地址https://www.toymoban.com/news/detail-796080.html

<!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>
        body{
            perspective: 1000px;
        }
        .box{
            width: 200px;
            height: 200px;
            background-color: pink;
            margin: 200px auto;
            transition: all 2s;
        }

        .box:hover{
            /* scaleX可以理解为盒子的宽 */
            transform: scaleX(2);
            /* scaleY可以理解为盒子的高 */
            transform: scaleY(2);
            /* scaleZ 可以理解为面向自己的方向在进行放大,需要把盒子进行旋转 */
            transform: scaleZ(10) rotateX(90deg);


            /* 连写  transform: scale3d(X,Y,Z);值为倍数*/
            transform: scale3d(2,2,2);


        }

    </style>
</head>
<body>
    <div class="box"></div>
    
</body>
</html>

到了这里,关于transform 平面转换(3d)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • [论文笔记]Glancing Transformer for Non-Autoregressive Neural Machine Translation

    这是论文Glancing Transformer for Non-Autoregressive Neural Machine Translation的笔记。 传统的非自回归文本生成速度较慢,因为需要给定之前的token来预测下一个token。但自回归模型虽然效率高,但性能没那么好。 这篇论文提出了Glancing Transformer,可以只需要一次解码,并行地文本生成。并

    2024年02月12日
    浏览(47)
  • ROS系列——使用python的transforms3d、numpy库实现四元数、旋转矩阵、欧拉角、轴角等的相互转换

    pip3 install transforms3d 四元数模块在transforms3d.quaternions里,直接导入即可使用 2.1.1四元数转旋转矩阵 2.1.2 旋转矩阵转四元数 2.2.1 四元数转轴角 2.2.2 轴角转四元数 四元数模块在transforms3d.euler里,直接导入即可使用 3.1.1 固定轴欧拉角转四元数 3.1.2 四元数转固定轴欧拉角 3.2.1 固定

    2024年02月07日
    浏览(93)
  • 李宏毅-hw5-translation-有关transformer、seq2seq的探索

    一、ppt研读: 1.关于这个 input Embedding 的内容: 2.关于Positional Encoding: 二、慢慢积累,一点点阅读代码: 虽然这次的模块挺多的,但是,这样也就意味着,把这个内化为自己的,就可以获得更大的进步了 1.关于使用git命令获取到源代码: 2.Fix Random Seed部分都是相同的,就是为

    2024年02月09日
    浏览(41)
  • AI Code Translator —— 能够实现高质量的自动编程语言转换工具

    https://github.com/mckaywrigley/ai-code-translator AI Code Translator —— 是一款基于大型语言模型的代码翻译工具,同时也是一款颠覆性的编程语言翻译工具,它基于先进的机器学习技术和大规模语料库训练而成,能够实现高质量的自动编程语言转换。 这款工具最大的突破在于翻译速度快且

    2024年02月04日
    浏览(49)
  • CSS进阶平面转换

    !DOCTYPE html html head     meta charset=\\\"UTF-8\\\" /     title平面转换/title     style         .father{             width: 500px;             height: 300px;             margin: 100px auto;             border:1px solid black;         }         .son{             width: 200px;             height: 100px;  

    2024年02月21日
    浏览(35)
  • 20231028-黑马web进阶-平面转换

    语法:transform:translate(水平移动距离,垂直移动距离); 取值(正负均可): ①像素单位数值 ②百分比(参照物为盒子自身尺寸) 注意: ①X轴正向为右,Y轴正向为下 ②translate()如果只给出一个值,表示X轴方向移动距离 ③单独设置某个方向的移动距离:translateX()translateY() 旋转

    2024年02月07日
    浏览(39)
  • Eigen::Isometry3d的用法(pretranslate、translate、prerotate、rotate的区别)

    pretranslate、prerotate表示左乘,即以世界坐标为参考 translate、rotate表示右乘,即以局部坐标系为参考 下面以直线L做45度旋转和向X方向移动200像素两次线性变换为例子:              isometry1.rotate(axisd);//右乘(局部坐标参考)     isometry1.translate(Eigen::Vector3d(200,0,0));     i

    2024年02月07日
    浏览(33)
  • 3D点云平面拟合算法

    假设你有一组 3D 中的 n 个点,并且想要为它们拟合一个平面。 在本文中,我将推导出一个简单的、数值稳定的方法,并提供它的源代码。 听起来很好玩? 我们开始吧! NSDT工具推荐 : Three.js AI纹理开发包 - YOLO合成数据生成器 - GLTF/GLB在线编辑 - 3D模型格式在线转换 

    2024年02月02日
    浏览(42)
  • 6-web前端的特效 平面转换transfrom

    作用:为元素 添加动态效果 ,一般与 过渡 配合使用   概念:改变盒子在 平面 内的 形态 (位移、旋转、缩放、倾斜)   平面转换又叫 2D 转换 1、平面转换----平移 目标:使用 translate 实现元素 位移 效果 语法 transform: translate(水平移动距离, 垂直移动距离); 取值( 正负 均可

    2024年02月08日
    浏览(41)
  • 平面设计师要会3D吗 优漫动游

      所谓物以稀为贵,对于设计人才也一样。越是稀缺的能力,能够发挥的价值就越高。于是现在很多互联网名企在招聘的时候都加了一条:会3D设计者优先。     其实这些看起来很厉害的设计,归结起来无非就三种形式:插画、三维、合成。     插画和合成,我们大部

    2024年02月08日
    浏览(49)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包