20231028-黑马web进阶-平面转换

这篇具有很好参考价值的文章主要介绍了20231028-黑马web进阶-平面转换。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

位移:translate

语法:transform:translate(水平移动距离,垂直移动距离);
取值(正负均可):
①像素单位数值
②百分比(参照物为盒子自身尺寸)
注意:
①X轴正向为右,Y轴正向为下
②translate()如果只给出一个值,表示X轴方向移动距离
③单独设置某个方向的移动距离:translateX()&translateY()

案例-双开门

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>平面转换-位移基本使用</title>
  <style>
    .father {
      width: 960px;
      height: 540px;
      margin: 100px auto;
      border: 1px solid black;
      background-color: blueviolet;
      overflow: hidden;
      /* 超出父级范围的隐藏 */
    }

    .sonLeft {
      width: 50%;
      height: 100%;
      float: left;
      background-color: aqua;
      transition: all 0.5s;
      /* 设置过渡效果,持续时间为0.5秒 */
    }

    .sonRight {
      width: 50%;
      height: 100%;
      float: right;
      background-color: skyblue;
      transition: all 0.5s;
      /* 设置过渡效果,持续时间为0.5秒 */
    }

    /* 定义鼠标悬停时子元素的样式 */
    .father:hover .sonLeft {
      transform: translate(-100%);
      /* 设置位移变换效果,将子元素向右下方位移75% */
    }

    .father:hover .sonRight {
      transform: translateX(100%);
      /* 设置位移变换效果,将子元素向右下方位移75% */
    }
  </style>
</head>

<body>
  <div class="father">
    <div class="sonLeft"></div>
    <div class="sonRight"></div>
  </div>
</body>

</html>

旋转

旋转:transform: rotate(角度deg);(角度正负均可)

转换原点:transform-origin:原点水平位置 原点垂直位置;(默认原点是盒子的中心点)
取值:
①方位名词:left top right bottom center
②像素单位数值
③百分比(参照盒子自身尺寸计算)

案例

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>平面转换-旋转</title>
  <style>
    .box {
      width: 200px;
      height: 200px;
      margin: 400px auto;
      background-color: aquamarine;
      transition: all 2s;
      /* 设置过渡效果,持续时间为2秒 */
      transform-origin: right bottom;
      /* 设置旋转的原点为盒子的右下角 */
    }

    /* 定义鼠标悬停时盒子的样式 */
    .box:hover {
      transform: rotate(360deg);
      /* 设置旋转变换效果,将盒子顺时针旋转360度(一圈) */
    }
  </style>
</head>

<body>
  <div class="box"></div>
</body>

</html>

多重转换

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>平面转换-多重转换</title>
  <style>
    .box {
      width: 800px;
      height: 200px;
      border: 1px solid black;
    }

    .circle {
      width: 200px;
      height: 200px;
      background-color: blueviolet;
      border-radius: 50%;
      transition: all 3s;
    }

    .box:hover .circle {
      transform: translate(600px) rotate(720deg);
      /* 注意:旋转会改变坐标轴向,多重转换如果涉及旋转往最后书写 */
    }
  </style>
</head>

<body>
  <div class="box">
    <div class="circle"></div>
  </div>
</body>

</html>

缩放

语法:transform:scale(x轴缩放倍数,y轴缩放倍数);
技巧:
一般情况下,只为scale设置一个值,表示x轴和y轴等比例缩放
transform:scale(缩放倍数);
scale值大于1表示放大,scale值小于1表示缩小

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>平面转换-缩放</title>
  <style>
    .box {
      width: 300px;
      height: 300px;
      background-color: blueviolet;
      border: 1px solid black;
      margin: 300px auto;
      overflow: hidden;
    }

    .btn {
      width: 50px;
      height: 50px;
      background-color: cadetblue;
      margin: 125px auto;
      border-radius: 50%;
      transform: scale(8);
      opacity: 0;
      transition: all 0.3s;
    }

    .box:hover .btn {
      transform: scale(1);
      opacity: 1;
    }
  </style>
</head>

<body>
  <div class="box">
    <div class="btn"></div>
  </div>
</body>

</html>

渐变background-image:linear-gradient(颜色1,颜色2,…);

常用:background-image:linear-gradient(transparent,rgba(0, 0, 0, .5));文章来源地址https://www.toymoban.com/news/detail-728444.html

到了这里,关于20231028-黑马web进阶-平面转换的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【Web前端开发基础】CSS3之空间转换和动画

    目标:使用transform属性实现元素在空间内的位移、旋转、缩放等效果 1.1 概述 空间:是从坐标轴角度定义的。x 、y 和z三条坐标轴构成了一个立体空间,z轴位置与视线方向相同 空间转换也叫3D转换 属性:transform 2D转换能够改变元素X轴和Y轴方向特性,3D转换还能改变Z轴方向特

    2024年01月25日
    浏览(52)
  • 20231103-黑马web进阶-动画

    1、定义动画 2、使用动画 3、案例 animation: 动画名称 动画时长 速度曲线 延迟时间 重复次数 动画方向 执行完毕时状态; 注意: ①动画名称和动画时长必须赋值 ②取值不分先后顺序 ③如果有两个时间值,第一个时间表示动画时长,第二个时间表示延迟时间 无限循环:animati

    2024年02月05日
    浏览(34)
  • 40个web前端实战项目,练完即可就业,从入门到进阶,基础到框架,html_css【附视频+源码】

    当下前端开发可以说是一个比较火的职业,所以学习的人比较多,不管是培训还是自学都是希望通过前端可以找到一份好的工作,但是很多自学的朋友在自学过程中有些盲目,不仅大大降低了学习的效率,而且也会打击自己的学习热情。 那么当我们学习了前端的一部分知识之

    2023年04月09日
    浏览(65)
  • 前端|Day3:CSS基础(黑马笔记)

    层叠样式表 (Cascading Style Sheets,缩写为 CSS),是一种 样式表 语言,用来 描述 HTML 文档的呈现 ( 美化内容 )。 书写位置: title 标签下方添加 style 双标签,style 标签里面书写 CSS 代码 。 提示:属性名和属性值成对出现 → 键值对。 内部 样式表:学习使用 CSS 代码写在 sty

    2024年02月21日
    浏览(42)
  • 黑马 pink h5+css3+移动端前端

    网页概念 网页是网站的一页,网页有很多元素组成,包括视频图片文字视频链接等等,以.htm和.html后缀结尾,俗称html文件 HTML 超文本 标记语言,描述网页语言,不是编程语言,是标记语言,有标签组成 超文本指的是不光文本,还有图片视频等等标签 常用浏览器 firefox google safari opera ed

    2024年02月16日
    浏览(80)
  • CSS笔记(黑马程序员pink老师前端)定位

    定位可以让盒子自由的在某个盒子内移动位置或者固定在屏幕中某个位置,并且可以压住其他盒子。 定位 = 定位模式 + 边偏移 定位模式 说明 static 静态定位,按标准流特性摆放,没有边偏移,很少用 relative 相对定位,相对自身原有位置移动,原有位置继续占有(不脱标) absolute 绝

    2024年02月09日
    浏览(54)
  • CSS笔记(黑马程序员pink老师前端)浮动,清除浮动

    浮动可以改变标签的默认排列方式。浮动元素常与标准流的父元素搭配使用. 网页布局第一准则 :多个块级元素纵向排列找标准流,多个块级元素横向排列找浮动。 float属性用于创建浮动框,将其移动到一边,直到左边缘或右边缘触及包含块或另一个浮动框的边缘。 1.浮动元素

    2024年02月09日
    浏览(52)
  • CSS笔记(黑马程序员pink老师前端)选择器,字体,文本属性,Emmet语法,元素显示模式,CSS背景

    选择器分为基础选择器和复合选择器两大类。 基础选择器 包括:标签选择器、类选择器、id选择器和通配符选择器。 多类名 可以把一些标签元素共同的样式放到一个类里面。这些标签都可以调用这个公共的类,然后再调用自己独有的类。 复合选择器 基础选择器的组合.包括后

    2024年02月09日
    浏览(61)
  • Web03--CSS进阶

    样式名 描述 text-align 设置内容位置 text-decoration 控制下划线 none没有 underline有 line-hight 行高 font-size 设置字体大小 font-weight 设置字体粗细的 font-famliy 设置字体样式 letter-spacing 设置中文字体之间的间距 word-spacing 设置英文单词之间的间距 行高:设置单行文字所占据的高度,实

    2024年01月22日
    浏览(53)
  • 黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端

    1.1什么是网页? 1.2什么是HTML? 2.1常用的浏览器 2.2浏览器内核  3.1为啥需要Web标准? 3.2Web标准的构成 : 4.1基本语法概述: 4.2标签关系: 5.1HTML网页:   6.1VSCode常用快捷键: 第二篇:前端VSCode常用插件-快捷键-以及常用技巧-pink老师 - 哔哩哔哩 快速复制一行:shift+alt+下/上箭

    2024年04月08日
    浏览(94)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包