CSS3 转换

最新推荐文章于 2021-12-12 12:43:12 发布

苦涩2020

最新推荐文章于 2021-12-12 12:43:12 发布

阅读量480

点赞数

分类专栏： CSS3 前端文章标签： css3

本文链接：https://blog.csdn.net/UserPython/article/details/106450955

版权

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<

最低0.47元/天解锁文章

苦涩2020

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3 转换

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

扫一扫