CSS篇--transform

CSS篇–transform

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

位移

在这里插入图片描述

// 语法
transform:translate(水平移动距离,垂直移动距离)
translate() 如果只给一个值,表示x轴方法移动距离
单独设置某个方向的移动距离:translateX() translateY()

使用translate快速实现绝对定位的元素居中效果

position:absolute;
left:50%;
top:50%,
transform:translate(-50%,-50%)
原理:位移·取值为百分比数值,参照盒子自身尺寸计算移动距离

旋转

使用rotate实现元素旋转效果
transform:rotate(角度)
// 角度单位是deg
技巧:取值正负均可
取值为正,顺时针旋转
取值为负,逆时针旋转

缩放

使用scale改变元素的尺寸
语法:transform:scale(x轴缩放倍数,y轴缩放倍数)
一般情况下,只为scale设置一个值,表示x轴和y轴等比例缩放
transform:scale(缩放倍数)
scale值大于1表示放大,小于1表示缩小

渐变

  background-image: linear-gradient(
                transparent,
                rgba(0,0,0,.6)
            );

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/390335.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

心理辅导|高校心理教育辅导系统|基于Springboot的高校心理教育辅导系统设计与实现(源码+数据库+文档)

高校心理教育辅导系统目录 目录 基于Springboot的高校心理教育辅导系统设计与实现 一、前言 二、系统功能设计 三、系统实现 1、学生功能模块的实现 (1)学生登录界面 (2)留言反馈界面 (3)试卷列表界…

TiDB 在医疗保障信息平台的应用实践

文章介绍了 TiDB 在医疗保障信息平台中的应用。东软医保云应用管理平台通过与 TiDB 联合,成功满足了医疗保障业务中高并发、实时性和复杂查询的要求。在某地市医疗保障信息平台的实践中,TiDB 分布式数据库有效实现了在线交易和实时分析服务,日…

人工智能学习与实训笔记(二):神经网络之图像分类问题

目录 四、图像分类问题 4.1 尝试使用全连接神经网络 4.2 引入卷积神经网络 4.3 分类函数Softmax 4.4 交叉熵损失函数 4.5 学习率优化算法 4.6 图像预处理算法 4.6.1 随机改变亮暗、对比度和颜色等 4.6.2 随机填充 4.6.3 随机裁剪 4.6.4 随机缩放 4.6.5 随机翻转 4.…

阿里云“BGP(多线)”和“BGP(多线)_精品”区别价格对比

阿里云香港等地域服务器的网络线路类型可以选择BGP(多线)和 BGP(多线)精品,普通的BGP多线和精品有什么区别?BGP(多线)适用于香港本地、香港和海外之间的互联网访问。使用BGP&#xf…

基于剪贴板的文件传输方案

文章目录 背景原理步骤获取待上传文件的十六进制数据格式转换输出 背景 某次误删了环境上的C库之后想到的 什么都不可用了,但当前的ssh连接还在,echo命令和重定向符还可以使用 这就催生了我的想法:直接用echo -en “\xab\xcd” > file这样…

人工智能学习与实训笔记(六):百度飞桨套件使用方法

目录 八、百度飞桨套件使用 8.1 飞桨预训练模型套件PaddleHub 8.1.1 一些本机CPU可运行的飞桨预训练简单模型(亲测可用) 8.1.1.1 人脸检测模型 8.1.1.2 中文分词模型 8.1.2 预训练模型Fine-tune 8.2 飞桨开发套件 8.2.1 PaddleSeg - 图像分割 8…

Codeforces Round 926 (Div. 2)(A~C)

A. Sasha and the Beautiful Array 分析:说实话,打比赛的时候看到这题没多想,过了一下样例发现将数组排序一下就行,交了就过了。刚刚写题解反应过来,a2-a1a3-a2.....an-a(n-1) an - a1,所以最后结果只取决…

MIT-BEVFusion系列八--onnx导出1 综述及相机网络导出

目录 综述export-camera.py加载模型加载数据生成需要导出成 onnx 的模块Backbone 模块VTransform 模块 生成 onnx使用 pytorch 原生的伪量化计算方法导出 camera.backbone.onnx导出 camera.vtransform.onnx 综述 bevfusion的各个部分的实现有着鲜明的特点,并且相互…

用HTML、CSS和JS打造绚丽的雪花飘落效果

目录 一、程序代码 二、代码原理 三、运行效果 一、程序代码 <!DOCTYPE html> <html><head><meta http-equiv"Content-Type" content"text/html; charsetGBK"><style>* {margin: 0;padding: 0;}#box {width: 100vw;heig…

基于3种机器学习法的黄土高原农业干旱监测比较研究_王晓燕_2022

基于3种机器学习法的黄土高原农业干旱监测比较研究_王晓燕_2022 摘要关键词1 引言2 研究区与数据6 结论#pic_center =x260) 摘要 本文集成 MODIS、TRMM、GLDAS 和再分析等多源数据,选取了 13 个与干旱有关的变量,并与基于气象数据的 3 个月时间尺度的标准化降水蒸发指数(SP…

Html的<figure><figcaption>标签

Html的<figure><figcaption>标签 示例一: <figure><figcaption>figcaption001, fig标题1 </figcaption><figcaption>figcaption002, fig标题2 </figcaption><div style"width:calc(100px*2); height:calc(100px*2); back…

微服务学习Day3

文章目录 初始DockerDocker介绍Docker与虚拟机镜像和容器 Docker的基本操作镜像操作容器命令数据卷挂载数据卷 Dockerfile自定义镜像Docker-Compose介绍Docker-Compose部署微服务镜像仓库 初始Docker Docker介绍 Docker与虚拟机 镜像和容器 Docker的基本操作 镜像操作 容器命…

云计算基础-云计算概念

云计算定义 云计算是一种基于互联网的计算方式&#xff0c;通过这种计算方式&#xff0c;共享的软硬件资源和信息可以按需提供给计算机和其他设备。云计算依赖资源共享以达成规模经济&#xff0c;类似基础设置(如电力网)。 云计算最基本的概念就是云加端&#xff0c;我们有一个…

第2讲springsecurity+vue通用权限系统

阿里云 maven阿里云镜像 <?xml version"1.0" encoding"UTF-8"?><!-- Licensed to the Apache Software Foundation (ASF) under one or more contributor license agreements. See the NOTICE file distributed with this work for addition…

用tensorflow模仿BP神经网络执行过程

文章目录 用矩阵运算仿真BP神经网络y relu ( (X․W ) b )y sigmoid ( (X․W ) b ) 以随机数产生Weight(W)与bais(b)placeholder 建立layer函数改进layer函数&#xff0c;使其能返回w和b github地址https://github.com/fz861062923/TensorFlow 用矩阵运算仿真BP神经网络 impo…

数据检索:倒排索引加速、top-k和k最邻近

之前在https://www.yuque.com/treblez/qksu6c/wbaggl2t24wxwqb8?singleDoc# 《Elasticsearch: 非结构化的数据搜索》我们看了ES的设计&#xff0c;主要侧重于它分布式的设计以及LSM-Tree&#xff0c;今天我们来关注算法部分&#xff1a;如何进行检索算法的设计以及如何加速倒排…

LabVIEW焊缝缺陷超声检测与识别

LabVIEW焊缝缺陷超声检测与识别 介绍基于LabVIEW的焊缝缺陷超声检测与识别系统。该系统利用LabVIEW软件和数据采集卡的强大功能&#xff0c;实现了焊缝缺陷的在线自动检测&#xff0c;具有通用性、模块化、功能化和网络化的特点&#xff0c;显著提高了检测的效率和准确性。 随…

DS:八大排序之直接插入排序、希尔排序和选择排序

创作不易&#xff0c;感谢三连支持&#xff01;&#xff01; 一、排序的概念及运用 1.1 排序的概念 排序&#xff1a;所谓排序&#xff0c;就是使一串记录&#xff0c;按照其中的某个或某些关键字的大小&#xff0c;递增或递减的排列起 来的操作。稳定性&…

GPT翻译网站的加载与使用

Sider: ChatGPT侧边栏 GPTs, GPT-4 Turbo, 联网, 绘图 sider.ai https://chromewebstore.google.com/detail/sider-chatgpt%E4%BE%A7%E8%BE%B9%E6%A0%8F-gpts-g/difoiogjjojoaoomphldepapgpbgkhkb?hlzh-CN 加入与移除 第二个翻译网站 https://chromewebstore.google.com/…

[BUUCTF]-PWN:ciscn_2019_es_1解析(tcachebin duf)

查看保护 再查看ida 大致为alloc创建堆块&#xff0c;free释放堆块&#xff0c;show输出堆块内容 但是要注意一点free没有清空堆块指针 完整exp&#xff1a; from pwn import* from LibcSearcher import* pprocess(./es1) premote(node5.buuoj.cn,26841)def alloc(size,cont…
最新文章