day16-2D&3D

最新推荐文章于 2024-07-18 19:27:45 发布

user_lc

最新推荐文章于 2024-07-18 19:27:45 发布

阅读量90

点赞数

分类专栏： html css 文章标签： 3d

本文链接：https://blog.csdn.net/user_lc/article/details/127584312

版权

html css 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<!--

位移属性的使用

1.属性:transform

2.属性值(功能函数):translate(参数)

3.关于位移属性值的设置

- translate(x,y) 控制元素沿着两个方向进行移动,只设置一个参数的时候只有X轴会有作用

- translateX(x的位置) 方向可以大写也可以小写

- translateY(y的位置) 方向可以大写也可以小写

-->

居中

<!--

1.版心居中 margin:0 auto

2.文本居中 text-align/line-height

3.背景居中 background-position

4.图片居中 vertical-align

5.定位居中

- 已知元素宽高 left/top

- 未知元素宽高 top/rigt/bottom/left=0

- CSS3计算属性 calc()

6.位移居中原理和定位一样

-->

<!--

缩放属性的使用

1.属性:transform

2.属性值:scale(参数)

3.关于缩放参数的使用

- scale(x,y) 沿着两个方向缩放多少倍,宽高缩放,当两个方向缩放的倍数是一样的时候可以简写一个参数

- scaleX() 宽度

- scaleY() 高度

4.关于参数的取值范围

- 小于 0 颠倒

- 等于 0 隐藏

- 小于 1 缩小

- 标准 1 保持不变

- 大于 1 放大

-->

<!--

设置变形的基点

1.属性:transform-origin

2.属性值:top/right/bottom/left/center(默认值)

- 2D:X Y

- 3D:X Y Z

-->

<!--

旋转属性的使用

1.属性:transform

2.属性值:rotate(角度值)

3.旋转参数的使用情况

- rotate(一个参数) 默认的是Z轴,正值就沿着顺时针负值沿着逆时针

- rotateX() 单杠运动

- rotateY() 钢管舞

4.注意

- 2D的观察方向永远都是站在轴向的正值方向去看的

- 当参数为正数的时候沿着顺时针旋转

- 当参数为负数的时候沿着逆时针旋转

为了很好的观察旋转属性的方向,可以使用景深属性:远小近大(视距)

有两种设置方法

1.可以在父级元素上添加 perspective:1200px

2.可以在子级元素上添加 transform:perspective(1200px)

3.建议把景深效果设置在父级元素上

倾斜属性的使用

1.属性:transform

2.属性值:skew()

3.倾斜参数的使用

- skew(x,y)

- skewX()

- skewY()

-->

3d中的位移属性

<!--

一:浏览器默认是2D空间,需要设置属性才可以变成3D空间(只是多了一条Z轴,浏览器不会变形!)

1.属性:transform-style

2.属性值

- flat 2D

- preserve-3d 3D

二:3D中的常见Z轴的设置

1.位移属性

- 2D:translate(x,y) translateX() translateY()

- 3D:translateZ() translate3d(x,y,z)

2.缩放属性

- 2D:scale(x,y) scaleX() scaleY()

- 3D:scaleZ() 单独使用的时候没有效果 scale3d(x,y,z)

3.旋转属性

- 2D:rotate(默认一个参数就是Z轴) rotateX() rotateY()

- 3D:rotateZ() rotate3d(x矢量值,y矢量值,z矢量值,角度值) 0/1 关闭/打开

4.倾斜没有Z轴的设置

-->

正方体：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../../reset.css">
    <style>
        section {
            width: 400px;
            height: 400px;
            /* border: 1px solid #000; */
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            margin: auto;
            transform-style: preserve-3d;
            transform: rotate3d(1, 1, 0, 30deg)
        }

        div {
            width: 400px;
            height: 400px;
            position: absolute;
            transition: 3s;
        }

        div:nth-child(1) {
            background: red
        }

        div:nth-child(2) {
            background: green
        }

        div:nth-child(3) {
            background: yellow
        }

        div:nth-child(4) {
            background: blue;
            backface-visibility: hidden
        }

        div:nth-child(5) {
            background: greenyellow
        }

        div:nth-child(6) {
            background: pink
        }

        div:nth-child(1) {
            /* 位移和其他属性 一律要先位移后去使用其他属性 */
            transform: translateX(200px) rotateY(90deg)
        }

        div:nth-child(2) {
            transform: translateX(-200px) rotateY(90deg)
        }

        div:nth-child(3) {
            transform: translateY(200px) rotateX(90deg)
        }

        div:nth-child(4) {
            transform: translateY(-200px) rotateX(90deg)
        }

        div:nth-child(5) {
            transform: translateZ(200px)
        }

        div:nth-child(6) {
            transform: translateZ(-200px)
        }
    </style>
</head>

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

</html>

头部的布局：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../../reset.css">
    <style>
        section{
            height: 58px;
            background: #E83928;
            display: flex;
            justify-content: space-evenly
        }
        header{
            width: 200px;
            height: 58px;
            background: pink;
            /* float: left; */
        }
        main{
            width: 300px;
            height: 58px;
            background: skyblue;
            /* float: right; */
        }
        nav{
            width: 500px;
            height: 58px;
            background: orange;
            /* margin: 0 auto */
        }
    </style>
</head>
<body>
    <section>
        <header></header>
        <nav></nav>
        <main></main>
    </section>
</body>
</html>