当前位置：首页 > news >正文

CSS3之3D转换

news 来源：原创 2024/9/21 1:35:24

文章目录

- 一、3D移动translate3d
- 二、perspective（透视）
- 三、translateZ
- 四、rotateX-rotateY-rotateZ
- 五、rotate3d(x,y,z,deg)
- 六、3D呈现transfrom-style
- 七、旋转木马案例

一、3D移动translate3d

3D移动在2D移动的基础上多加了一个可以移动的方向，就是z轴方向


 - transform:translateX(100px) ===> 仅仅在x轴上移动
 - transform:translateY(100px) ===> 仅仅在y轴上移动
 - transform:translateZ(100px) ===> 仅仅在z轴上移动
 - transform:translate3d(x,y,z) ===> x,y,z代表要移动的方向

二、perspective（透视）

写到被观察盒子的父盒子上
模拟人眼观察目标物体的距离

    body{
        perspective: 1000px;
    }
    div{
        width: 200px;
        height: 200px;
        background-color: blueviolet;
        margin: 0% auto;
        transform: translate3d(100px,100px,100px);
    }
</style>
<body>
    <div>1</div>

三、translateZ

Z轴值越大，目标物体就越大

<style>
    body{
        perspective: 500px;
    }
    div{
        width: 100px;
        height: 100px;
        margin: 0% auto;
        background-color: antiquewhite;
        transform: translateZ(100px);
        
    }
</style>
<body>
    <div>
        1
    </div>

四、rotateX-rotateY-rotateZ

沿着X，Y，Z轴旋转

<style>
    body{
        perspective: 500px;
    }
    div:hover{
        transform: rotateZ(360deg);
        transform: rotateY(360deg);
        transform: rotateZ(360deg);
    }
    div{
        height: 200px;
        width: 200px;
        display: block;
        background-color: aquamarine;
        margin:100px auto;
        transition: all 2s;
    }
    
</style>
<body>
    <div>123</div>
</body>

五、rotate3d(x,y,z,deg)

沿着自定义轴旋转deg为角度

<style>
    body{
        perspective: 500px;
    }
    div:hover{
        transform: rotate3d(1,0,1,360deg);
        transform: rotate3d(1,1,0,360deg);
        transform: rotate3d(0,1,1,360deg);
    }
    div{
        height: 200px;
        width: 200px;
        display: block;
        background-color: aquamarine;
        margin:100px auto;
        transition: all 2s;
    }
</style>
<body>
    <div>123</div>
</body>

六、3D呈现transfrom-style


 - 控制子元素是否开启三维立体环境
 - transform-style:flat子元素不开启3d立体空间默认的
 - transform-style:perserce-3d;子元素开启立体空间
 - 代码写给父级，但是影响的是子盒子

<style>
    body{
        perspective: 500px;
    }
    .father{
        height: 200px;
        width: 200px;
        position: relative;
        margin: 100px auto;
        transform-style: preserve-3d;
        transition: all 2s;
    }
    .father:hover{
        transform: rotateY(360deg);
    }
    .father div{
        width: 100%;
        height: 100%;
        position: absolute;
        background-color: aqua;
    }
    .father div:last-child{
        background-color: yellowgreen;
        transform: rotateX(60deg);
    }
</style>
<body>
    <div class="father">
        <div>1</div>
        <div>2</div>
    </div>
</body>

在这里插入图片描述

七、旋转木马案例

<!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>Document</title>
</head>
<style>
    body{
        perspective: 1500px;
    }
    section{
        position: relative;
        width: 300px;
        height: 200px;
        margin: 200px auto;
        transform-style: preserve-3d;
        /* background-color: yellowgreen; */
        animation: rotate 3s linear infinite;
    }
    section:hover{
        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-image: url(./img/赛博朋克.jpg);
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    section div:nth-child(1){
        transform: rotateY(0deg) translateZ(400px)
    }
    section div:nth-child(2){
        transform: rotateY(60deg) translateZ(400px)
    }
    section div:nth-child(3){
        transform: rotateY(120deg) translateZ(400px)
    }
    section div:nth-child(4){
        transform: rotateY(180deg) translateZ(400px)
    }
    section div:nth-child(5){
        transform: rotateY(240deg) translateZ(400px)
    }
    section div:nth-child(6){
        transform: rotateY(300deg) translateZ(400px)
    }
</style>
<body>
    <section>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
    </section>
</body>
</html>