CSS3之2D转换、3D转换

前言：可以配合我上一期博客（过渡与动画）一起看CSS3之过渡与动画 https://blog.youkuaiyun.com/weixin_45707229/article/details/125642353

2D转换 transform

位移translate

• translate(x轴, y轴); 一个不能少（某个方向不想移动就写0 ） ，可以是百分比，百分比单位是相对于自身元素的，px单位相对于父元素

• translateX(xxpx); 沿X轴移动 ，也可以是百分比，百分比单位是相对于自身元素的，px单位相对于父元素

• translateY(xxpx); 沿Y轴移动 ，也可以是百分比，百分比单位是相对于自身元素的，px单位相对于父元素

重点：

不会影响其他元素的位置，上面在移动，下面的标准流不变

对行内标签没有效果（a、span等）

例：

可以配合定位，实现子元素在父元素垂直居中的效果(子绝父相，子top:50%,left:50%,transform: translate(-50%,-50%);实现居中于父元素)

<style>
        .box1{
            position: relative;
            width: 200px;
            height: 100px;
            transform: translate(10%,10%);
            background-color: pink;
        }
        .box2{
            position: absolute;
            top: 50%;
            left: 50%;
            width: 50px;
            height: 25px;
            background-color: skyblue;
            transform: translate(-50%,-50%);
        }
    </style>
    <div class="box1">
        <div class="box2"></div>
    </div>

旋转rotate

transform: rotate(xx deg); deg是度 角度，旋转的度数

例：配合过渡，实现鼠标悬停时，旋转360度一圈

<style>
	img{
        border: 3px solid black;
        border-radius: 50%;
        transition: all 0.5s;
    }
    img:hover{
        transform: rotate(360deg);
    }
</style>
<img src="../SHOPING/favicon.ico" >

转换的起点transform-origin

可以作为旋转点

transform-origin: x y （x和y用空格隔开）

x和y可以是 xxpx xxpx 或 xx% xx% 或 left/right/top/bottom/center left/right/top/bottom/center

默认是50% 50% 也就是中心点

例： 以左下角为旋转点旋转

<style>
        .origin{
	        overflow: hidden;
	        width: 100px;
	        height: 100px;
	        margin: 10px auto;
	        border: 1px solid gray;
	        transform-origin: left top;
    	}
        .origin::before{
            content: "xxx";
            display: block;
            width: 100%;
            height: 100%;
            background-color: pink;
            transform: rotate(90deg);
            transform-origin: left bottom;
            transition: all 0.3s;
        }
        .origin:hover::before{
            transform: rotate(0deg);
        }
    </style>
    <div class="origin"></div>

缩放scale

transform: scale(x,y) 没有单位，直接写倍数。 宽度 扩展为x倍，高度 扩大为原来y倍 ，
1默认不变；
2扩大2倍；
0.5缩小原来一半

transform: scale(x) 宽高一起变x倍 大小

缩放后原位置不变，不影响其他标准流

例： 鼠标悬停在头像上时放大

<style>
    img{
        border: 3px solid black;
        border-radius: 50%;
        transition: all 0.5s;
    }
    #avatar{
        line-height: 70px;
        transition: all 0.3s;
    }
    #avatar:hover{
        transform: scale(1.1);
    }
</style>
    <img id="avatar" src="../SHOPING/favicon.ico">

2D转换的复合写法

transform: translate(x,y) rotate(xx deg) scale(x,y) … 等

顺序会影响转换的效果。（先旋转会改变坐标轴方向）

同时有位移和其他属性时，记得把位移放最前面

3D转换

坐标轴

位移 translate3d

• transform: translateX( …px) 仅在x轴上移动

• transform: translateY( …px) 仅在y轴上移动

• transform: translateZ( …px) 仅在z轴上移动

• transform: translate3d(x,y,z) xyz分别指要移动的轴的方向的距离，一个都不能少写。

透视 perspective

perspective 给父元素添加，单位px，值越大，离屏幕越远，子元素越小。

由此能实现近大远小 的效果

旋转 rotated3d

• rotateX( …deg) 正数沿x轴顺时针旋转，负数逆时针
• rotateY( …deg) 正数沿y轴顺时针旋转，负数逆时针
• rotateZ( …deg) 正数沿z轴顺时针旋转，负数逆时针
• rotate3d(x,y,z,xxdeg) （了解）
  可以自定义旋转轴，rotate3d(1,1,0,30deg) 表示沿着x轴和y轴中间的轴即 对角线 旋转30度。

例： 结合动画，进行3d旋转

<style>
        body{
            perspective: 500px;
        }
        img{
            display: block;
            margin: 50px auto;
            border: 5px solid black;
            animation: xxx 2s linear infinite;
        }
        @keyframes xxx {
            0%{ 
            }
            25%{
                transform: rotateX(30deg)
            }
            50%{
                transform: rotateX(30deg) rotateY(30deg)    
/*rotateX(30deg)是保持上面那个x轴的旋转状态，而不是在x轴累加再旋转30度*/ 
            }
            75%{               
                 transform: rotateX(30deg)  rotateY(30deg)  rotateZ(30deg)   
/*同理，rotateX(30deg)和rotateY(30deg)是保持上面那的旋转状态，不是累加*/ 
            }
            100%{
                transform: rotateX(0deg)  rotateY(0deg)  rotateZ(0deg)
            }
        }
    </style>
    <img src="./GuangDong.jpg">

开启三维立体环境

控制子元素是否开启三维立体环境

transform-style 默认 flat 不开启立体空间

transform-style: preserve-3d 子元素开启立体空间

代码写给父级，但是影响的是子盒子

---

综合案例： 魔方

<style> 
        body{
            perspective: 500px;
        }

        @keyframes upsidedown {
            0%{}
            25%{
                transform: rotateY(221deg)  rotateX(344deg) rotateZ(34deg);
            }
            50%{
                transform: rotateY(44deg)  rotateX(12deg) rotateZ(62deg);
            }
            75%{
                transform: rotateY(123deg)  rotateX(64deg) rotateZ(17deg);
            }
            100%{
                transform: rotateY(22deg)  rotateX(90deg) rotateZ(202deg);
            }
        }

      .box{
        position: relative;
        width: 100px;
        height: 100px;
        transform-style: preserve-3d;   /*   让子盒子保持三维立体  */
        margin: 200px auto;
        animation: upsidedown 3s ease-in-out 0.2s infinite alternate;
      }

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

      .top{
            background-color: red;
            transform: translateY(-50%) rotateX(90deg);
        }

        .left{
            background-color: blue;
            transform: translateX(-50%)  rotateY(90deg);
        }
        .front{
            background-color: white;
            text-align: center;
            line-height: 100px;
            transform:  translateZ(50px);
        }
        .back{
            background-color: yellow;
            transform: translateZ(-50px);
        }
        .right{
            background-color: green;
            transform: translateX(50%) rotateY(90deg);
        }

        .bottom{
            background-color: orange;
            transform: translateY(50%) rotateX(90deg);
        }
</style>
    <div class="box">
        <div class="top"></div>
        <div class="left"></div>
        <div class="front">魔方</div>
        <div class="back"></div>
        <div class="right"></div>
        <div class="bottom"></div>
    </div>

效果：