美文网首页
CSS中实现3D效果总结与示例

CSS中实现3D效果总结与示例

作者: 周星星的学习笔记 | 来源:发表于2021-01-29 12:50 被阅读0次

今天简单总结一下关于实现3D的几个较为重要的注意点。

一、透视

1.描述

  • 如果想要在网页内产生3D效果需要透视。(理解成3D物体投影在2D平面内)
  • 模拟人类的视觉位置,可认为安排一直眼睛去看。
  • 透视我们也称为视距:视距就是人的眼睛到屏幕的距离。
  • 距离视觉点越近的在电脑屏幕成像越大,反之越远就越小。
  • 透视的单位是像素

2.图解

  • d: 就是视距,就是人的眼睛到屏幕的距离。
  • z: 就是z轴,物体距离屏幕的位置,z值越大(正值),我们看到的物体就越大

3.代码

perspective: <视距>;
#例如:
perspective: 500px;

二、3D呈现transform-style

1.描述

  • 控制子元素是否开启三维立体环境。
  • transform-style: flat;子元素不开启3D立体空间(默认的)
  • transform-style: preserve-3d;子元素开启3D立体空间
  • 代码写给父盒子,但是影响的是子盒子

2.代码

transform-style: preserve-3d;

三、3D导航示例

1.代码

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

<head>
    <meta charset="UTF-8">
    <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;
            margin: 15px;
            width: 240px;
            height: 70px;
            list-style: none;
            /* 设置透视:视距为500px */
            perspective: 500px;
            cursor: pointer;
        }

        .box {
            position: relative;
            width: 100%;
            height: 100%;
            /* 设置子盒子保持3d效果 */
            transform-style: preserve-3d;
            /* 增加过渡效果 */
            transition: all .4s;
        }

        .box:hover {
            /* 鼠标移动上去,盒子向上翻转90度 */
            transform: rotateX(90deg);
        }

        .front,
        .bottom {
            position: absolute;
            left: 0px;
            top: 0px;
            width: 100%;
            height: 100%;
            text-align: center;
            line-height: 70px;
        }

        .front {
            background-color: blueviolet;
            z-index: 1;
            transform: translateZ(35px);
        }

        .bottom {
            background-color: pink;
            /* 如果有移动或者其他样式,必须先写移动 */
            transform: translateY(35px) rotateX(-90deg);
        }
    </style>
</head>

<body>
    <ul>
        <li>
            <div class="box">
                <div class="front">周星星</div>
                <div class="bottom">新年快乐</div>
            </div>
        </li>
        <li>
            <div class="box">
                <div class="front">周星星</div>
                <div class="bottom">万事如意</div>
            </div>
        </li>
        <li>
            <div class="box">
                <div class="front">周星星</div>
                <div class="bottom">阖家幸福</div>
            </div>
        </li>
        <li>
            <div class="box">
                <div class="front">周星星</div>
                <div class="bottom">牛气冲天</div>
            </div>
        </li>
    </ul>
</body>

</html>

2.效果

四、备注

1.本文参考:https://www.bilibili.com/video/BV14J4114768?p=377

相关文章

  • CSS中实现3D效果总结与示例

    今天简单总结一下关于实现3D的几个较为重要的注意点。 一、透视 1.描述 如果想要在网页内产生3D效果需要透视。(...

  • 随手收集

    one div实现icon one div 实现动态天气 css实现文字3D CSS实现文本干扰效果 CSS实现文...

  • 使用纯CSS代码实现3D旋转效果

    主要使用CSS中的 preserve-3d 、perspective 属性实现3D效果 效果 HTML代码 为了演...

  • css实现简单的3D效果

    css实现简单3D房间效果 纯3D效果实现上述效果,总体思路就是旋转容器,为容器贴纸。 这是一个简单的3D立方体空...

  • CSS中特殊效果的实现方案

    相关文章 CSS中渐变特性的研究 CSS中颜色突变的实现方案 CSS中条纹效果的实现方案 CSS中环形效果的实现方...

  • Vue 实现滚动滑块功能

    实现效果 ScrollProgress组件 使用示例 使用时导入css样式即可 tailwindcss[https...

  • css实现鼠标移入翻滚卡片的3D效果

    要实现一个卡片翻滚的3D效果,鼠标移入翻滚到背面,鼠标移出翻滚到正面 html css 按照代码中的注释写css样...

  • web前端特效演示合集

    前端特效01:使用纯CSS实现书籍3D翻页效果 前端特效02:使用纯CSS实现动态太极 前端特效03:HTML5画...

  • 一个元素如何居中

    任务目的 实践HTML/CSS布局方式 深入了解position等CSS属性 任务描述 实现如下示例图的效果 灰色...

  • 用CSS3制作3D图片环

    上一篇文章讲了利用css3制作3D图片爆炸效果,现在我们同样用css3制作3D图片环,我们先看一下实现的效果图:刚...

网友评论

      本文标题:CSS中实现3D效果总结与示例

      本文链接:https://www.haomeiwen.com/subject/jwhqtltx.html