2/3D平面转换

最新推荐文章于 2024-07-14 23:31:57 发布

慎--独

最新推荐文章于 2024-07-14 23:31:57 发布

阅读量112

点赞数

分类专栏：前端文章标签：平面 css 前端 html css3

本文链接：https://blog.csdn.net/qq_48256263/article/details/125586799

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

平面转换

目标：使用transform属性实现元素的位移、旋转、缩放等效果

位移：

目标：使用translate实现元素位移效果
语法：transform:translate(水平移动距离,垂直移动距离)
取值：

正负均可
像素单位值
百分比（参照物为盒子自身尺寸）

注意：X轴正向为右，Y轴正向为下
技巧：

translate()如果只给出一个值, 表示x轴方向移动距离
单独设置某个方向的移动距离：translateX() & translateY()

补充：

transition()//过渡属性
::before、::after伪元素显示模式为行内显示模式，加宽高不生效，可以用display，或者给浮动，宽高会生效！

位移–绝对定位居中

子绝父相：

postion:absolute;
left:50%;
top:50%;
margin-left:-100px;
margin-top:-50px;
width:200px;
height:100px;

位移的方法：

postion:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);//百分比参考盒子自身尺寸计算结果
width:200px;
height:100px;

旋转

目标：使用rotate实现元素旋转效果
语法
transform: rotate(角度);
注意：角度单位是deg
技巧：取值正负均可

取值为正, 则顺时针旋转
取值为负, 则逆时针旋转

转换原点

目标：使用transform-origin属性改变转换原点
语法：

默认圆点是盒子中心点
transform-origin: 原点水平位置原点垂直位置; //一律添加给标签本身写，不要加到hover,

取值：

方位名词（left、top、right、bottom、center） ,方位名词之间用空格隔开
像素单位数值
百分比（参照盒子自身尺寸计算）

多重转换

目标：使用transform复合属性实现多形态转换
多重转换技巧：

transform:translate() rotate()//移动距离记得注意本身距离一圈360deg 不可以颠倒顺序先位移，后旋转！如果颠倒，旋转会改变坐标轴向！也不可以拆开分别写，css相同的属性有层叠，覆盖掉了。

多重转换原理：

旋转会改变网页元素的坐标轴向
先写旋转，则后面的转换效果的轴向以旋转后的轴向为准，会影响转换结果

缩放

目标：使用scale改变元素的尺寸
思考: 改变元素的width或height属性能实现吗？
语法：

transform: scale(x轴缩放倍数, y轴缩放倍数);

技巧：

一般情况下, 只为scale设置一个值, 表示x轴和y轴等比例缩放
transform: scale(缩放倍数);
scale值大于1表示放大, scale值小于1表示缩小
透明度（opacity）可以看见变化过程，0-看不见 1-看得见 0~1半透明

transform 有复合属性自己伪元素两个transform会层叠，在hover的时候，transform也会层叠，所以复制一份到hover里！

 .box .pic::after {
            /* 播放按钮压在图片上面 - 居中 */
            position: absolute;
            left: 50%;
            top: 50%;
            /* margin-left: -29px;
            margin-top: -29px; */
            /* transform: translate(-50%, -50%); */

            content: '';
            width: 58px;
            height: 58px;
            background-image: url(./images/play.png);

            /* 大图 */
            transform: translate(-50%, -50%) scale(5);

            /* 透明,看不见 */
            opacity: 0;
            transition: all .5s;
        }

        /* lihover的时候,  谁变小pic::after */
        .box li:hover .pic::after {
            opacity: 1;
            transform: translate(-50%, -50%) scale(1);
        }

渐变

渐变背景：

目标：使用background-image属性实现渐变背景效果

渐变是多个颜色逐渐变化的视觉效果
一般用于设置盒子的背景

在这里插入图片描述

语法：

 /* background-image: linear-gradient(
                pink,
                green,
                hotpink
            ); *///用的不多 
background-image: linear-gradient(
                transparent,
                rgba(0,0,0, .6)
            );//透明度