HTML5+CSS3基础+移动端（day21）_html5 <!doctype html>移动端参数-CSDN博客

本文链接：https://blog.csdn.net/m0_52372037/article/details/128894743

本文详细介绍了CSS3的3D转换技术，包括3D旋转在导航栏案例中的应用，以及一个综合的旋转木马案例。同时，文章也探讨了移动端开发的关键点，如移动Web的流式布局、视口概念、meta视口标签、物理像素与设备像素比、二倍图策略以及背景缩放的使用方法。

摘要由CSDN通过智能技术生成

一、CSS3 3D转换（续）

5. 3D旋转rotate

（7）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;
        }

        ul {
            margin: 100px;
        }

        ul li {
            float: left;
            margin: 0 5px;
            width: 120px;
            height: 35px;
            list-style: none;
            /* 一会需要给box旋转 也需要透视 干脆给li加 里面的子盒子都有透视效果 */
            /* 近大远小效果 */
            perspective: 500px;
        }

        .box {
            position: relative;
            width: 100%;
            height: 100%;
            /* 让父级保留孩子的这种立体空间 */
            transform-style: preserve-3d;
            transition: all .4s;
        }

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

        .front,
        .bottom {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

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

        .bottom {
            background-color: purple;
            /* 这个x轴一定是负值 */
            /* 如果有移动 或者其它样式，必须先写移动 */
            transform: translateY(17.5px) rotateX(-90deg);
        }
    </style>
</head>

<body>
    <ul>
        <li>
            <div class="box">
                <div class="front">hellow</div>
                <div class="bottom">你好</div>
            </div>
        </li>
        <li>
            <div class="box">
                <div class="front">hellow</div>
                <div class="bottom">你好</div>
            </div>
        </li>
        <li>
            <div class="box">
                <div class="front">hellow</div>
                <div class="bottom">你好</div>
            </div>
        </li>
    </ul>
</body>

</html>

6. 综合案例-旋转木马案例

在这里插入图片描述

<!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: 1000px;
            transform-style: preserve-3d;
        } */
        body {
            perspective: 1000px;
        }

        section {
            position: relative;
            width: 300px;
            height: 200px;
            margin: 150px auto;
            /* perspective: 1000px; */
            /* 加了这种立体效果 我们就要让子元素保留这种立体效果 不然会很乱 */
            transform-style: preserve-3d;
            /* 添加动画效果 */
            animation: rotate 10s linear infinite;
            background: url(media2/pig.jpg);
        }

        section:hover {
            /* 鼠标放入section 停止动画 */
            animation-play-state: paused;
        }

        @keyframes rotate {
            0% {
                transform: rotateY(0);
            }

            100% {
                transform: rotateY(360deg);
            }
        }

        section div {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url(media2/dog.jpg) no-repeat;
        }

        section div:nth-child(1) {
            /* 给它的父亲（section）加透视 因为section要旋转 所以给body加就好了 */
            /* 盒子是用定位加在一起的，第一个盒子是压在最底下的 */
            transform: rotateY(0) 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);
        }
    </style>
</head>

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

</html>

7. 浏览器私有前缀以及总结

二、移动端开发

1. 移动WEB开发流式布局导读

2. 移动端基础

3. 视口

4. meta视口标签

<!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,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
    <title>meta视口标签</title>
</head>

<body>
    棒打鲜橙
</body>

</html>

在这里插入图片描述

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>物理像素与物理像素比</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 300px;
            height: 300px;
            background-color: pink;
        }

        /* 1. 物理像素 就是我们说的分辨率 iphone8的物理像素是750 */
        /* 2. 在iphone8里面 1px开发像素=2个物理像素 */
    </style>
</head>

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

</html>

6. 二倍图

<!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>
        /* 我们需要一个50*50像素（CSS像素）的图片 直接放到我们的iphone8里面会放大2倍 100*100就会模糊 */
        /* 我们采取的是放一个 100*100的图片 然后手动把这个图片缩小为50*50（css像素） */
        /* 我们准备的图片 比我们实际需要的大小大2倍 这种方式就是2倍图 */
        img:nth-child(2) {
            width: 50px;
            height: 50px;
        }
    </style>
</head>

<body>
    <!-- 模糊的 -->
    <img src="images/apple50.jpg" alt="">
    <!-- 我们采取2倍图 -->
    <img src="images/apple100.jpg" alt="">
</body>

</html>

7. 背景缩放background-size

<!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>背景缩放background-size</title>
    <style>
        div {
            width: 500px;
            height: 500px;
            border: 2px solid red;
            background: url(images/dog.jpg) no-repeat;
            /* background-size: 图片的宽度 图片的高度; */
            /* background-size: 500px 200px; */
            /* 1. 只写一个参数肯定是宽度，高度省略了 会等比例缩放 */
            /* background-size: 500px; */
            /* 2. 里面的单位可以跟% 相对于父盒子来说的 */
            /* background-size: 50%; */
            /* 3. cover要完全覆盖div盒子 可能有部分背景图片显示不全 */
            /* background-size: cover; */
            /* 4. contain 高度和宽度等比例拉伸 当宽度或者高度铺满div盒子就不会再进行拉伸了 可能有部分空白区域*/
            background-size: contain;
        }
    </style>
</head>

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

</html>