CSS3 转换

2D位移转换

参考点（基点）在元素的中心点
相对自身参考点进行位移
位移设置成百分比后，是自身元素尺寸的百分比，元素的尺寸是否固定不会影响百分比的计算
transform: translateX(-150px); X轴：正往右，负往左
transform: translateY(150px); Y轴：正往下，负往上
transform: translate(100px, 100px); 2D位移简写，值1是X轴，值2是Y轴

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <link rel="stylesheet" href="../css/reset.css">
    <style type="text/css">
        .box{
            width: 100px; height: 100px; background: #ccc;
            margin:50px auto;
        }
        .sBox{
            width: 100px; height: 100px; background: red;
            /* transform: translateX(-150px); */
            /* transform: translateY(-100px); */

            /* transform: translateX(50%); */

            /* 2D位移简写，值1是X轴，值2是Y轴 */
            transform: translate(100px, 100px);
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="sBox"></div>
    </div>
</body>
</html>

视距

视距：眼睛距显示器距离，所以视距要大于Z轴距离
视距属于transform的前置属性，写在父元素中
视距值越大，变化越小，视距值越小，变化越大
视距的默认值为：无穷大

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <link rel="stylesheet" href="../css/reset.css">
    <style type="text/css">
        .box{
            width: 100px; height: 100px; background: #ccc;
            margin:50px auto; 
            /* 视距：眼睛距显示器距离，所以视距要大于Z轴距离 */
            perspective: 200px;
        }
        .sBox{
            width: 100px; height: 100px; background: red;
        }
        .sBox:hover{
            /* Z轴：正往前，负往后 */
            transform: translateZ(-150px);
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="sBox"></div>
    </div>
</body>
</html>

3D位移转换

Z轴方向位移不能设置百分比
transform: translateZ(-150px); Z轴：正往前，负往后
transform: translate3d(100px, 100px, 200px); 3D位移简写：值1是X轴，值2是Y轴，值3是Z轴

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <link rel="stylesheet" href="../css/reset.css">
    <style type="text/css">
        .box{
            width: 100px; height: 100px; background: #ccc;
            margin:50px auto; 
            /* 视距：眼睛距显示器距离，所以视距要大于Z轴距离 */
            perspective: 300px;
        }
        .sBox{
            width: 100px; height: 100px; background: red;
        }
        .sBox:hover{
            /* Z轴：正往前，负往后 */
            /* transform: translateZ(-150px); */

            /* 3D位移简写：值1是X轴，值2是Y轴，值3是Z轴 */
            transform: translate3d(100px, 100px, 200px);
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="sBox"></div>
    </div>
</body>
</html>

缩放转换

缩放转换：元素放大缩小
值：比例，参考自身尺寸
默认的基点在元素中心点
默认值为1，当值小于1时，表示缩小，大于1表示放大
设置Z轴要在3D环境中
当值为负时，元素会翻转

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <link rel="stylesheet" href="../css/reset.css">
    <style type="text/css">
        .box{
            width: 200px; height: 200px; background: #ccc;
            margin:50px auto; 
            perspective: 500px;
        }
        .sBox{
            width: 100px; height: 100px; background: red;
        }
        .sBox:hover{
            /* 缩放转换：元素放大缩小 */
            /* 值：比例，参考自身尺寸 */
            /* 默认的基点在元素中心点 */
            /* 默认值为1，当值小于1时，表示缩小，大于1表示放大 */
            transform: scaleX(2);
            transform: scaleX(0.5);

            transform: scaleY(2);
            transform: scaleY(0.5);

            /* 没有Z轴没有厚度不能设置Z轴 */
            /* transform: scaleZ(2) ; */

            /* 设置一个角度后，就有厚度了，就可以设置Z轴了 */
            transform: rotateY(45deg);
            transform: scaleZ(3) rotateY(45deg);

			 /* X,Y轴同时缩放：值1是X轴，值2是Y轴 */
            transform: scale(2, 3);
            /* X,Y轴同时缩放相同比例 */
            transform: scale(2);
            /* X,Y,Z轴缩放：值1是X轴，值2是Y轴，值3是Z轴 */
            transform: scale(2, 3, 4);
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="sBox"></div>
    </div>
</body>
</html>

2D角度转换

角度转换：元素转一个角度
值：角度deg；正负值方向相反
默认的基点在元素的中心点
2D角度转换，绕Z轴旋转

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <link rel="stylesheet" href="../css/reset.css">
    <style type="text/css">
        .box{
            width: 200px; height: 200px; background: #ccc;
            margin:50px auto; 
            perspective: 500px;
        }
        .sBox{
            width: 200px; height: 200px; background: red;
        }
        .sBox:hover{
           transform: rotate(45deg);
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="sBox"></div>
    </div>
</body>
</html>

3D角度转换

transform: rotateX(45deg); transform: rotateX(-45deg);

绕X轴旋转，旋转的角度是与Y轴的夹角
正值元素上远离，元素下靠近
负值元素上靠近，元素下远离

transform: rotateY(45deg); transform: rotateY(-45deg);

绕Y轴旋转，旋转的角度是与Z轴的夹角
正值元素右远离，元素左靠近
负值元素右靠近，元素左远离

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <link rel="stylesheet" href="../css/reset.css">
    <style type="text/css">
        .box{
            width: 200px; height: 200px; background: #ccc;
            margin:50px auto; 
            perspective: 500px;
        }
        .sBox{
            width: 200px; height: 200px; background: red;
        }
        .sBox:hover{
            /* 绕X轴旋转，旋转的角度是与Y轴的夹角
            正值元素上远离，元素下靠近
            负值元素上靠近，元素下远离 */
            /* transform: rotateX(45deg); */
            /* transform: rotateX(-45deg); */

            /* 绕Y轴旋转，旋转的角度是与Z轴的夹角
            正值元素右远离，元素左靠近
            负值元素右靠近，元素左远离 */
            /* transform: rotateY(45deg); */
            /* transform: rotateY(-45deg); */

            /* transform: rotateY(20deg, 40deg, 60deg);错误 */
            transform: rotateX(20deg) rotateY(40deg) rotateZ(60deg);
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="sBox"></div>
    </div>
</body>
</html>

倾斜转换

倾斜转换：元素倾斜
值：角度deg；正负值方向相反
默认的基点在元素的中心点
Z轴没有倾斜

transform: skewX(45deg); transform: skewX(-45deg);

X轴倾斜，倾斜后与Y轴夹角，元素高度不变
正值逆时针倾斜，负值顺时针倾斜

transform: skewY(45deg); transform: skewY(-45deg);

Y轴倾斜，倾斜后与X轴夹角，元素高度不变
正值顺时针倾斜，负值逆时针倾斜

transform: skew(45deg, 30deg);

倾斜简写，值1是X轴，值2是Y轴

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <link rel="stylesheet" href="../css/reset.css">
    <style type="text/css">
        .box{
            width: 200px; height: 200px; background: #ccc;
            margin:50px auto; 
            perspective: 500px;
        }
        .sBox{
            width: 200px; height: 200px; background: red;
        }
        .sBox:hover{
            transform: skewX(45deg);
            transform: skewX(45deg);

            transform: skewY(45deg);
            transform: skewY(-45deg);

            transform: skew(45deg, 39deg);
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="sBox"></div>
    </div>
</body>
</html>

转接简写

属性值书写有顺序，顺序不一样，效果不一样

transform: translate(100px, 50px) scale(0.5, 0.8) rotateZ(-45deg) skewX(30deg);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <link rel="stylesheet" href="../css/reset.css">
    <style type="text/css">
        .box{
            width: 200px; height: 200px; background: #ccc;
            margin:50px auto; 
            perspective: 500px;
        }
        .sBox{
            width: 200px; height: 200px; background: red;
            transition: transform 1s;
        }
        .sBox:hover{
           transform: translate(100px, 50px) scale(0.5, 0.8) rotateZ(-45deg) skewX(30deg);
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="sBox"></div>
    </div>
</body>
</html>

元素翻转后是否可见

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <link rel="stylesheet" href="../css/reset.css">
    <style type="text/css">
        .box{
            width: 200px; height: 200px; background: #ccc;
            margin:50px auto; 
            perspective: 500px;
        }
        .sBox{
            width: 200px; height: 200px; background: red;
            transition: transform 1s;

            /* 定义当元素不面向屏幕时是否可见 */
            backface-visibility: hidden;
        }
        .sBox:hover{
            transform: rotateY(180deg);
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="sBox">123</div>
    </div>
</body>
</html>

2D位移转换

视距

3D位移转换

缩放转换

2D角度转换

3D角度转换

倾斜转换

转接简写

元素翻转后是否可见

free AI online tools All In One

使用c#强大的表达式树实现对象的深克隆之解决循环引用的问题

痞子衡嵌入式：恩智浦i.MX RT1xxx系列MCU启动那些事（12.A）- uSDHC eMMC启动时间(RT1170)

linux安装cuda和cudnn

Mellanox网卡开启SR-IOV

模拟手机设备：使用 Playwright 实现移动端自动化测试

HTML 00 Tutorial

全面系统的AI学习路径，帮助普通人也能玩转AI

从零开始：使用 Playwright 脚本录制实现自动化测试

uni-app实现上拉加载

JavaScript 本地存儲

基於jQuery實現幻燈片切換效果

HTML5 canvas組件

JavaScript 音頻插件和圖表插件

基於jQuery實現垂直輪播效果

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結