CSS进阶平面转换

2024-02-20 18:42:01
开发
24

<!DOCTYPE html>

<html>

<head>

<style>

.father{

width: 500px;

height: 300px;

margin: 100px auto;

border:1px solid black;

}

.son{

width: 200px;

height: 100px;

background-color: pink;

transition: all 0.5s;

}

/* 鼠标移入到父盒子，son改变位置 */

.father:hover .son{

transform: translate(200px,100px);

}

</style>

</head>

<body>

<!-- 平面转换transform

作用：为元素添加动态效果，一般与过渡配合使用

概念：改变盒子在平面内的形态(位移，旋转，缩放，倾斜)

平面转换又叫2D转换

-->

<!-- 平面转换平移

属性：transform：translate（X轴移动距离，Y轴移动距离）;

取值：

像素单位数值

百分比（参照盒子自身尺寸计算结果）

正负均可

技巧：

translate（）只写一个值，表示沿X轴移动

单独设置X或Y轴移动距离：translateX（）或translateY ()

-->

<!-- 绝对定位元素居中效果

position:absolute;

left:50%;

top:50%;

transform:translate(-50%,-50%);

width:200px;

height:100px;

-->

<!-- 平面转换旋转

属性：transform：rotate（旋转角度）；

角度单位是deg

技巧

取值正负均可

取值为正，顺时针旋转

取值为负，逆时针旋转

-->

<!-- 平面转换改变转换原点

默认情况下，转换原点是盒子中心点

属性

transform-origin：水平原点位置垂直原点位置;

取值：

方位名词

像素单位数值

百分比

-->

<!-- 平面转换多重转换

技巧：先平移再旋转

transform:translate() rotate();

注意：旋转会改变坐标轴向，多重转换会以第一种转换形态的坐标轴为准

-->

<!-- 平面转换缩放（沿着中心点向四周缩放）

注意：修改宽高尺寸，从左上角开始缩放

属性：

transform：scale（缩放倍数）;

transform：scale (x轴缩放倍数，Y轴缩放倍数) ;

技巧：通常，只为scale（设置一个值，表示X轴和Y轴等比例缩放

取值大于1表示放大，取值小于1表示缩小

-->

<!-- 平面转换倾斜

属性：transform:skew();

取值：角度度数deg

-->

<!-- 渐变

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

分类：

线性渐变

径向渐变

-->

<!-- 线性渐变

属性：background-image：linear-gradient(

渐变方向

颜色1 终点位置，

颜色2 终点位置（位置可以省略）

);

取值：

渐变方向：可选

to 方位名词

角度度数

终点位置：可选

百分比

-->

<!-- 径向渐变

作用：给按钮添加高光效果

属性：

background-image：radial-gradient(

半径 at 圆心位置，

颜色1 终点位置，

颜色2 终点位置

);

取值：

半径可以是2条，则为椭圆

圆心位置取值：像素单位数值/百分比/方位名词

-->

</div>

</body>

</html>

原文地址:https://blog.csdn.net/m0_59745705/article/details/136193953 本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：https://www.suanlizi.com/kf/1759891146391293952.html 如若内容造成侵权/违法违规/事实不符，请联系《酸梨子》网邮箱：1419361763@qq.com进行投诉反馈，一经查实，立即删除！

阅读全部

CSS进阶平面转换

相关推荐

最近更新

热门阅读