3D 旋转木马

news2024/11/16 1:58:09

在工作中我们常用到3D装换和3D位移

主要知识点

3D位移：transale3d(x,y,z)
3D旋转：rotate3d(x,y,z)
透视：perspective
3D呈现 transfrom-style

1、 transale3d

translform:
- translform:translateX(100px):仅仅是在x轴上移动
- translform:translateY(100px):仅仅是在Y轴上移动
- translform:translateZ(100px):仅仅是在Z轴上移动(注意:translateZ一般用px单位)
- transform:translate3d(x,y,z):其中x、y、z分别指要移动的轴的方向的距离
- 语法：transform: translateX(100px) translateY(100px) translateZ(100px) ; 可以简写成 translform: translate3d(100px,100px,100px)

注意 transform:translateZ(100px) 需要借助透视才能看出效果。

设置转换中心点 transform-origin

transform-origin : left bottom; // 可以加方位名词
transform-origin :50% 50%; // 默认的
transform-origin :50px 50px;

透视 perspective

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

透视写在被观察元素的父盒子上面的
d：就是视距，视距就是一个距离人的眼睛到屏幕的距离
z：就是z轴，物体距离屏幕的距离，轴越大(正值)我们看到的物体就越大

<style>
    div{
        width: 100px;
        height: 100px;
        background-color: aqua;
        transform: translate3d(500px,100px,100px);
    }
    body{
        perspective: 200px;
    }
</style>
<body>
    <div>   </div>
</body>

3D旋转 rotate3d

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

transform:rotateX(45deg): 沿着x轴正方向旋转45度
transform:rotateY(45deg):沿着y轴正方向旋转45deg
transform:rotateZ(45deg):沿着Z轴正方向旋转45deg
transform:rotate3d(xy,z,deg):沿着自定义轴旋转deg为角度(了解即可)

<style>
    img {
      dispaly:block;
      margin:100px auto;
      transition: all 1s;
    }
    img:hover {
      // transform:rotateX(180deg)  ==> transform:rotate3d(1,0,0, 180deg)
     //  transform:rotateY(180deg) ==>  transform:rotate3d(0,1,0, 180deg)
     // transform:rotateZ(180deg)  ==>  transform:rotate3d(0,0,1, 180deg)
     transform:rotate3d(1,1,0, 80deg) // 沿着对角线旋转80度
    }
    body{
        perspective: 200px;
    }
</style>
<body>
    <img src="../i.jpg" alt="" />
</body>

transform-style

控制子元素是否开启三维立体环境。
transform-style:flat子元素不开启3d立体空间（默认的）
transform-style:preserve-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>
</head>
<style>
    body{
        perspective: 350px;
    }
    .box{
        position: relative;
        width: 300px;
        height: 300px;
        margin: 100px auto;
        transition: all .6s;
        /* 让背面盒子保留立体空间 */
        transform-style: preserve-3d;
        transform-style: preserve-3d;
    }
    .box:hover{
        transform: rotateY(180deg);
    }
    .front,.back{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        font-size: 30px;
        color: #fff;
        text-align: center;
        line-height: 300px;
    }
    .front{
        background-color: coral;
 
    }
    .back{
        background-color: aqua;
        transform: rotateY(180deg) translateZ(25px);  
    }
</style>
<body>
    <div class="box">
        <div class="front">前面的盒子</div>
        <div class="back">后面的盒子</div>
    </div>
</body>
</html>

旋转木马

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    body{
        perspective: 1000px;

    }
    section{
        width: 300px;
        height: 200px;
        margin: 150px auto;
        transform-style: preserve-3d;
        /* 添加动画效果 */
        animation: rotate 10s linear infinite;
        background: url("https://img2.baidu.com/it/u=611871399,1204008993&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500") no-repeat;
        background-size: contain;

    }
    section:hover{
        /* 鼠标放入停止动画 */
        animation-play-state: paused;
    }
    @keyframes rotate {
        0%{
            transform: rotateY(0);
        }
        100%{
            transform: rotateY(360deg);
        }
    }
    section div{
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
     
        background: url("https://img0.baidu.com/it/u=2669442330,2110216600&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500") no-repeat;
        background-size: contain;

    }
    section div:nth-child(1){
        transform: 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>
<body>
    
    <section>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </section>
 
</body>
</html>