HTML5+CSS3 (3)

已注销
259 阅读2分钟

3D

简称3维坐标系 比二维坐标系多一个Z轴

3D位移

3D位移在2D的基础上多一个可移动的Z轴

  transform: translate3d(x,y,z);

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
      
        
        .box {
            width: 200px;
            height: 200px;
            background-color: blue;
            /* 位移3D的写法 */
            /* transform: translate3d(200px, 200px, 200px); */
            /* 或者可以这样写 */
            transform: translateX(400px) translateY(400px) translateZ(400px);
        }
    </style>
</head>

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

</html>

注意事项

  • x轴 Y轴一般用px 百分比来当作单位。
  • Z轴一般用px做单位 必须借助透视功能。
  • z轴向外移动一般是正值，向内移动是负值。

perspective

特点

  • 透视是视距，单位为px
  • 近大远小，透视写在被观察元素的父元素上。
  • 透视的单位越大，看到的物品就越小，透视的单位越小，看到的物品就越大。
  • 在透视固定的情况下，z轴越大，看到的物品就越大，z轴越小，看到的物品就越小。

在这张图中，d为透视，位于人的眼睛和被观察物体的中间，即近大远小

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        body {
            perspective: 500px;
        }
        
        .box {
            width: 200px;
            height: 200px;
            margin: 200px auto;
            background-color: blue;
            transform: translateZ(100px);
        }
    </style>
</head>

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

</html>

3D旋转

3D 旋转指可以让元素在三维平面内沿着 x 轴、y 轴、z 轴 或者自定义轴进行旋转

rotateX

左手弯曲的手指方向即为x轴的正方向 

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        img {
            display: block;
            width: 600px;
            margin: 200px auto;
            transition: all 2s linear 0s;
        }
        
        img:hover {
            transform: rotateX(45deg);
        }
    </style>
</head>

<body>
    <img src="./image/星空.jpg" alt="">
</body>

</html>

rotateY

左手手指弯曲的方向即为y轴的正方向

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        img {
            display: block;
            width: 600px;
            margin: 200px auto;
            transition: all 2s linear 0s;
        }
        
        img:hover {
            transform: rotateY(45deg);
        }
    </style>
</head>

<body>
    <img src="./image/星空.jpg" alt="">
</body>

</html>

rotateZ

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        img {
            display: block;
            width: 600px;
            margin: 200px auto;
            transition: all 2s linear 0s;
        }
        
        img:hover {
            transform: rotateZ(45deg);
        }
    </style>
</head>

<body>
    <img src="./image/星空.jpg" alt="">
</body>

</html>

简写

  • transform: rotate3d(1, 1, 0, 180deg) -- 沿着对角线旋转 45deg
  • transform: rotate3d(1, 0, 0, 180deg) -- 沿着 x 轴旋转 45deg
 transform:rotate3d(x,y,z,deg)

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        img {
            display: block;
            width: 600px;
            margin: 200px auto;
            transition: all 2s linear 0s;
        }
        
        img:hover {
            transform: rotate3d(1, 1, 1, 180deg)
        }
    </style>
</head>

<body>
    <img src="./image/星空.jpg" alt="">
</body>

</html>

transform-style

transform:preserve-3d 让子元素保持3d空间环境


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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            perspective: 500px;
        }
        
        .box {
            position: relative;
            width: 200px;
            height: 200px;
            transform-style: preserve-3d;
            margin: 200px auto;
            transition: all 2s linear 0s;
        }
        
        .box:hover {
            transform: rotateY(60deg);
        }
        
        .box div {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: pink;
        }
        
        .box div:last-child {
            background-color: purple;
            transform: rotateX(60deg);
        }
    </style>
</head>

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

</html>

案例

两面反转的盒子

思路

  • 先准备一个大盒子 里面装着两个小盒子
  • 使用定义，让其中的一个盒子翻转180deg
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            perspective: 400px;
        }
        
        .box {
            position: relative;
            width: 400px;
            height: 400px;
            margin: 200px auto;
            transition: all 0.4S;
            /* 开启子元素在3d空间的环境 */
            transform-style: preserve-3d;
        }
        
        .box:hover {
            transform: rotateY(180deg);
        }
        
        .front,
        .back {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            text-align: center;
            line-height: 400px;
            color: #cccccc;
            font-weight: 700;
            border-radius: 50%;
        }
        
        .front {
            background-color: pink;
            z-index: 1;
        }
        
        .back {
            background-color: purple;
            /* 像手机一样 背靠背 旋转 */
            transform: rotateY(180deg);
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="front">尧子陌</div>
        <div class="back">临风笑却世间</div>
    </div>
</body>

</html>

3d导航栏案例

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        ul {
            width: 1200px;
            height: 40px;
            margin: 200px auto;
        }
        
        li {
            float: left;
            list-style: none;
            width: 80px;
            height: 80px;
            perspective: 400px;
            margin: 0px 5px;
        }
        
        .box {
            position: relative;
            width: 100%;
            height: 100%;
            transform-style: preserve-3d;
            transition: all 0.5s;
        }
        
        .box:hover {
            /* x轴顺时针旋转90deg */
            transform: rotateX(90deg);
        }
        
        .front,
        .back {
            position: absolute;
            top: 0;
            left: 0;
            width: 80px;
            height: 80px;
            color: blanchedalmond;
            text-align: center;
            line-height: 80px;
        }
        
        .front {
            background-color: blue;
            z-index: 1;
            /* z轴移动40px */
            transform: translateZ(40px);
        }
        
        .back {
            background-color: green;
            /* x轴移动40px x轴逆时针旋转-90deg */
            transform: translateY(40px) rotateX(-90deg);
        }
    </style>
</head>

<body>
    <div class="div">
        <ul>
            <li>
                <div class="box">
                    <div class="front">hello</div>
                    <div class="back">尧子陌</div>
                </div>
                <li>
                    <div class="box">
                        <div class="front">hello</div>
                        <div class="back">尧子陌</div>
                    </div>
                    <li>
                        <div class="box">
                            <div class="front">hello</div>
                            <div class="back">尧子陌</div>
                        </div>
                        <li>
                            <div class="box">
                                <div class="front">hello</div>
                                <div class="back">尧子陌</div>
                            </div>
                            <li>
                                <div class="box">
                                    <div class="front">hello</div>
                                    <div class="back">尧子陌</div>
                                </div>
                            </li>
        </ul>
    </div>
</body>

</html>

旋转木马

  • 分析如下：给body设置透视 给div的父元素设置3d效果
  • 把每个盒子摆放到正确的位置 利用动画即可
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            perspective: 1000px;
        }
        
        section {
            position: relative;
            width: 200px;
            height: 200px;
            /* 让块级盒子居中对齐 */
            margin: 400px auto;
            /* 让子盒子拥有3d属性 */
            transform-style: preserve-3d;
            animation: rotation 10s linear 0s infinite;
        }
        
        @keyframes rotation {
            0% {
                transform: rotateY(0deg);
            }
            100% {
                transform: rotateY(360deg);
            }
        }
        
        section:hover {
            animation-play-state: paused;
        }
        
        img {
            width: 200px;
            height: 200px;
        }
        
        section div {
            position: absolute;
            top: 0;
            left: 0;
            width: 200px;
            height: 200px;
        }
     
        section div:nth-of-type(1) {
            transform: rotateY(0deg) translateZ(200px);
        }
        
        section div:nth-of-type(2) {
            transform: rotateY(60deg) translateZ(200px);
        }
        
        section div:nth-of-type(3) {
            transform: rotateY(120deg) translateZ(200px);
        }
        
        section div:nth-of-type(4) {
            transform: rotateY(180deg) translateZ(200px);
        }
        
        section div:nth-of-type(5) {
            transform: rotateY(240deg) translateZ(200px);
        }
        
        section div:nth-of-type(6) {
            transform: rotateY(300deg) translateZ(200px);
        }
    </style>
</head>

<body>
    <section>

        <div><img src="./image/一.jpg" alt=""></div>
        <div><img src="./image/二.jpg" alt=""></div>
        <div><img src="./image/三.jpg" alt=""></div>
        <div><img src="./image/四.jpg" alt=""></div>
        <div><img src="./image/五.jpg" alt=""></div>
        <div><img src="./image/六.jpg" alt=""></div>
    </section>
</body>

</html>

浏览器私有前缀

提倡写法

avatar
文章
阅读
粉丝