温故知新之（七）2D和3D的移动、旋转、缩放、背景渐变

最新推荐文章于 2023-03-06 08:19:47 发布

我在人间贩卖青春

最新推荐文章于 2023-03-06 08:19:47 发布

阅读量182

点赞数

分类专栏： CSS(3) 文章标签： CSS3 2D 3D 移动、旋转、缩放

本文链接：https://blog.csdn.net/weixin_44178305/article/details/120358553

版权

CSS(3) 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

2D转换

translate移动

transform:translate(x,y);
分开写法：
- transform:translateX(n);
- transform:translateY(n);
translate 最大的优点：不会影响到其他元素的位置
translate 中的百分比单位是相对于自身元素的
对行内标签没有效果

旋转

transform: rotate(Ndeg);
rotate 里面跟度数，单位是 deg ,比如 rotate(45deg)
默认旋转的中心点是元素的中心点
transform-origin: x y;设置元素转换的中心点
- x,y 可以设置为像素、百分比或者方位名词

缩放

transform: scale(x,y);
- x,y 大于1是放大，小于1是缩小，等于1不变
- 只写一个参数，第二个参数则和第一个参数一样，相当于 scale(2,2)
sacle缩放最大的优势：可以设置转换中心点缩放，默认以中心点缩放的，而且不影响其他盒子

2D转换复合写法

同时有位移和其他属性，我们需要把位移放到最前面位移，旋转，缩放
transform: translate(150px, 50px) rotate(180deg) scale(1.2);

3D转换

3D位移translate3d

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

透视perspective

想要在网页产生3D效果需要透视
perspective: 200px; 透视写到被观察元素的父盒子上面
有了透视，才能看到translateZ 引起的变化

3D旋转

transform: rotateX(45deg); 沿着X轴正方向旋转45度
transform: rotateY(45deg); 沿着Y轴正方向旋转45度
transform: rotateZ(45deg); 沿着Z轴正方向旋转45度
符合写法：
- transform: rotate3d(x,y,z,deg); ，x、y、z是表示旋转轴的矢量，沿着自定义轴旋转 deg为角度
- transform: rotate3d(1,0,0,45deg)； 表示沿着X轴旋转45deg

3D呈现 transfrom-style

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

<!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>
    <style>
        body {
            perspective: 500px;
        }
        
        .box {
            position: relative;
            width: 200px;
            height: 200px;
            margin: 100px auto;
            transition: all 2s;
            /* 让子元素保持3d立体空间环境 */
            transform-style: preserve-3d;
        }
  
        .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>