关于css3盒子模型新特性

remember_slll

已于 2022-11-13 01:44:59 修改

阅读量120

点赞数

文章标签：开发语言

于 2022-11-10 18:15:55 首次发布

本文链接：https://blog.csdn.net/remember_slll/article/details/127792080

版权

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

选择器属性过渡动画平移 3d空间边框…
HTML5新增属性
CSS3新增

前言

提示：这里可以添加本文要记录的大概内容：

例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。

提示：以下是本篇文章正文内容，下面案例可供参考

一、HTML新增属性

1HTML5新增语义化标签

article

header

nav

aside

footer

    <!-- article:常用于日志 一条新闻 -->
    <article></article>
    <!-- header:头部区域 -->
    <header></header>
    <nav>
    </nav>
     <section>对网站内容进行分块</section>
     <!-- aside侧边栏 广告 引用 -->
     <aside></aside>
     <!-- 用来定义底部区域 -->
     <footer></footer>

2.多媒体标签

二、CSS3新特性

1.transform: translate(水平移动距离)(1500px)rotate（旋转的度数）(1500deg);

<!DOCTYPE html>

<html>

<head>

  <style>

    .box{

      width: 1200px;

      height: 50px;

      border-bottom: 3px solid gray;

      margin: 200px auto;

    }

    img{

      width: 50px;

      transition: all 8s;

    }
    .box:hover img{

      /* 边走边旋转 */

       transform: translate(1500px)rotate(1500deg);

      /* transform: rotate(360deg) translate(600px); */
    
    }

  </style>

</head>

<body>

  <div class="box">

    <img src="../品优购/images/floor-1-2.png" alt="">

  </div>

</body>

</html>