H5 + C3基础(八)(3d转换 位移 & 旋转)

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

定义

3d转换在2d转换中增加了一个z轴,垂直于屏幕,向外为正,向内为负

位移

在2d位移的基础上增加了

  • translateZ(z);
    在Z轴上的位移

  • translate3d(x,y,z);
    同时定义在3个轴上的位移

透视 perspective

3D效果通过透视距离(视距)和z轴模拟人眼到盒子的距离

视距越大,隔得越远,物体越小;视距越大,隔得越近,物体越大;
Z轴越大,隔得越近,物体越大,Z轴越小,隔得越远,物体越小。

透视距离需加载模拟3d的元素的父盒子上,通过父盒子的视角去模拟3d近大远小的效果。

透视距离需 >= z轴的值,否则相当于物体跑进我们眼睛里面了。

透视和z轴都可以调整最终观察到的物体大小

透视和Z轴使用场景

透视(视距):用于设置眼睛到屏幕的距离,用于在父盒子上设置统一的视距。

Z轴:用于给盒子内不同元素,单独设置盒子距离屏幕的Z轴的值,并体现出不同的大小。

旋转

和位移一样,3d旋转在2d旋转的基础之上,加了z轴的旋转。
同样要借助 基于父盒子的视距模拟3d效果。
对于旋转的的方向:站在坐标轴正方向,顺势针方向即为正向旋转,逆时针即为负向旋转。

新增两个旋转属性

  • rotateZ(deg);沿着z轴旋转指定度数
  • rotate3d(x, y, z, deg);沿着自定义轴线旋转

子元素开启3d视图

transform-style:flat(默认,不开启)| preserve-3d 开启3d视图

同样这个属性是给到父盒子的。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>子盒子保持3d视图</title>
        <style>
            .box {
                position: relative;
                width: 500px;
                height: 200px;
                background-color: #ff6700;
                margin: 100px auto;
                perspective: 500px;
                transform-style: preserve-3d;
            }

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

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

            .box div:last-child {
                background-color: green;
                transform: rotateX(45deg);
            }


            body {
                perspective: 500px;
            }
        </style>

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

示例

  1. 盒子前后面反转
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>前后翻转盒子</title>
        <style>
            .box {
                position: relative;
                width: 300px;
                height: 300px;
                margin: 100px auto;
                transition: all .2s;

                perspective: 300px;
                transform-style: preserve-3d;

            }

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

            .box > * {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                border-radius: 150px;
                font-size: 20px;
                text-align: center;
                line-height: 300px;
                backface-visibility: hidden;
            }

            .box .front {
                background-color: #ee20ee;
                z-index: 1;
            }

            .box .back {
                background-color: #ff5000;
                transform: rotateY(180deg);
            }
            body{
                perspective: 300px;
                transform-style: preserve-3d;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="front">今天要上学</div>
            <div class="back">作业没写完</div>
        </div>
    </body>
</html>
  1. 3d菜单
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>3d菜单</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            ul {
                margin: 100px auto;
                width: 200px;
                height: 100px;
            }

            ul li {
                float: left;
                margin: 0 5px;
                width: 100%;
                height: 100%;
                list-style: none;
                perspective: 500px;
            }
            div {
                width: 100%;
                height: 100%;
                text-align: center;
                line-height: 100px;
            }

            .box {
                position: relative;
                transition: all 0.6s;
                transform-style: preserve-3d;
                background-color: #ff5000;
            }

            .front {
                position: absolute;
                z-index: 1;
                top: 0;
                left: 0;
                background-color: green;
                transform: translateZ(50px)
            }

            .bottom {
                position: absolute;
                top: 0;
                left: 0;
                transform: translateY(50px) rotateX(-90deg); /*translateZ(100px)*/
                background-color: #ee20ee;
            }

            .box:hover {
                transform: rotateX(90deg);
            }

            body {
                perspective: 500px;
                transform-style: preserve-3d;
            }
        </style>
    </head>
    <body>
        <ul>
            <li>
                <div class="box">
                    <div class="front">正面</div>
                    <div class="bottom">底面</div>
                </div>
            </li>
        </ul>
    </body>
</html>
  1. 围绕y轴旋转
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>围绕一个y轴旋转</title>

    <style>
        body {
            perspective: 1000px;
        }
        
        .box {
            position: relative;
            margin: 200px auto;
            width: 200px;
            height: 200px;
            text-align: center;
            transform-style: preserve-3d;
            animation: three_rotate 10s infinite linear;
        }

        .box:hover {
            animation-play-state: paused;
        }

        img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
        }

        @keyframes three_rotate {
            0% {
                transform: rotateY(0);
            }
            100% {
                transform: rotateY(360deg);
            }
        }

        .box img:nth-child(1) {
            transform: translateZ(300px);
        }

        .box img:nth-child(2) {
            transform: rotateY(60deg) translateZ(300px);
        }

        .box img:nth-child(3) {
            transform: rotateY(120deg) translateZ(300px);
        }

        .box img:nth-child(4) {
            transform: rotateY(180deg) translateZ(300px);
        }

        .box img:nth-child(5) {
            transform: rotateY(240deg) translateZ(300px);
        }

        .box img:nth-child(6) {
            transform: rotateY(300deg) translateZ(300px);
        }


    </style>
</head>
<body>
<!--动态转动都是围绕 .box 这个盒子的,里面的图片都是事先摆在相应的位置,相当于是附属在这个盒子上随着.box盒子的转动而转动-->
<div class="box">
    <img src="../../img/抢购封面.jpg">
    <img src="../../img/抢购封面.jpg">
    <img src="../../img/抢购封面.jpg">
    <img src="../../img/抢购封面.jpg">
    <img src="../../img/抢购封面.jpg">
    <img src="../../img/抢购封面.jpg">
</div>
</body>
</html>

小结

3d变换注意两个属性:

  • perspective: 300px;
    开启3d视图,这个值必须比Z轴的值大,且设置在要表现3d效果的盒子的父盒子上
    作用:让其子元素的3d属性呈现出立体的效果,有近大远小的视觉

  • transform-style: preserve-3d;
    保留子盒子3d效果,默认当父盒子开启3d视图,并且发生3d转换时,子盒子会变成2d,需要给父盒子加上此属性
    作用:使当前盒子开启在开启3d属性后,其子元素依然保留已开启的3d效果文章来源地址https://www.toymoban.com/news/detail-682045.html

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

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

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

相关文章

  • CSS3基础之3D转换(1)

    3. 透视perspective 3.1`translateZ` 4. 3D旋转`rotate3d` 5. 3D呈现`transform-style` 1. 三维坐标系 ======================================================================== 三维坐标系 其实就是指立体空间,立体空间是由3个轴共同组成的 x轴: 水平向右 注意: x 右边是正值,左边是负值 y轴: 垂直向下 注意:

    2024年04月23日
    浏览(66)
  • CSS3过渡、过渡练习——进度条案例、2D转换(translate、rotate、scale、转换中心点transform-origin)、动画、3D、案例(两面翻转的盒子、3D导航栏、旋转木马案例)

    目录 一、CSS3过渡(transition)(重点) 二、CSS3过渡练习——进度条案例 三、CSS3 2D转换(translate、rotate、scale、转换中心点transform-origin) 四、CSS3 动画 五、CSS3动画常见属性 五、热点图案例(动画) 六、速度曲线之steps步长(案例——奔跑的熊大) 七、CSS3 3D转换(3D 位移:t

    2024年02月03日
    浏览(47)
  • 【Web前端开发基础】CSS3之空间转换和动画

    目标:使用transform属性实现元素在空间内的位移、旋转、缩放等效果 1.1 概述 空间:是从坐标轴角度定义的。x 、y 和z三条坐标轴构成了一个立体空间,z轴位置与视线方向相同 空间转换也叫3D转换 属性:transform 2D转换能够改变元素X轴和Y轴方向特性,3D转换还能改变Z轴方向特

    2024年01月25日
    浏览(50)
  • 【Web前端开发基础】CSS3之Web字体、字体图标、平面转换、渐变

    1.1 Web字体概述 每种字体都对应着相应的字体文件,没有 @font-face 规则之前,客户端是否能够正确显示 fontfamily 规定的字体,是由该字体的文件是否预装在客户端决定的。而 @font-face 规则可以将字体文件存放在服务器端,渲染页面时客户端请求从服务器端下载改字体文件进行

    2024年01月25日
    浏览(59)
  • CSS3实现图片的3D旋转效果

    准备两张图片,尺寸一样大,本代码中是绕 Y 轴进行旋转(也可以改为 X 轴)。 先看看效果:   代码如下:

    2024年02月12日
    浏览(51)
  • 黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端

    1.1什么是网页? 1.2什么是HTML? 2.1常用的浏览器 2.2浏览器内核  3.1为啥需要Web标准? 3.2Web标准的构成 : 4.1基本语法概述: 4.2标签关系: 5.1HTML网页:   6.1VSCode常用快捷键: 第二篇:前端VSCode常用插件-快捷键-以及常用技巧-pink老师 - 哔哩哔哩 快速复制一行:shift+alt+下/上箭

    2024年04月08日
    浏览(90)
  • css3实现3D立方体旋转特效源码

    CSS3自动旋转正方体3D特效是一款基于css3 keyframes属性制作的图片相册自动旋转立方体特效 css3实现3D立方体旋转特效代码

    2024年04月09日
    浏览(49)
  • CSS3提高: CSS3 3D转换

    3D 转换   我们生活的环境是 3D 的 ,照片就是 3D 物体 在 2D 平面 呈现的 例子。 有什么特点 近大远小。 物体后面遮挡不可见 我们在网页上构建 3D 效果的时候参考这些特点就能产出 3D 效果。 三维坐标系 三维 坐标系其实就是指立体空间,立体空间是由 3 个轴共同组成 的。

    2024年02月01日
    浏览(55)
  • 520要来了,CSS3模拟3D旋转节日表白动画特效

    一年一度的520要来了,做为一名CSS3爱好者,怎么能不为大家的技术型表白做出一点贡献呢,这不,用CSS3模拟3D旋转的表白特效来了,快快拿去表白 目录 实现思路  单层3D可见 HTML源代码 CSS3源代码   实现思路  本文通过添加. scene 类,添加 .banner 类,使其双层3D呈现 transform

    2024年02月05日
    浏览(48)
  • 2023最新八股文前端面试题 (css、js、h5c3)

    随着科技的不断发展,前端技术也在不断演进,成为了现代应用开发中不可或缺的一部分。在2023年的前端面试中,面试官们常常会问及关于CSS、JS以及HTML5/CSS3等方面的问题,以评估面试者的技术深度和实践经验。下面,让我们来一起解析这些最新的前端面试题,探讨这些技术的前沿趋势。

    2024年02月16日
    浏览(75)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包