html的过渡、平移、旋转与3d属性

最新推荐文章于 2024-07-15 16:36:52 发布

azkhx

最新推荐文章于 2024-07-15 16:36:52 发布

阅读量2.4k

点赞数 8

文章标签： html 3d 前端 css

本文链接：https://blog.csdn.net/azkhx/article/details/132341952

版权

本文介绍了CSS3的过渡属性及其使用，包括transition的基本概念、语法、示例，以及2D属性如transform中的translate、scale、rotate和3D属性如translate3d、rotate3d、scaleZ以及景深的实现。

摘要由CSDN通过智能技术生成

一、过渡属性

过渡属性介绍：

css3的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值

注意点：

过渡效果对display:none;和display:blok;不起作用

语法：

过渡属性分写形式：

transition-property：检索或设置对象中的参与过渡的属性

transition-duration：检索或设置对象过渡的持续时间

transition-delay：检索或设置对象延迟过渡的时间

transition-timing-function：检索或设置对象中过渡的动画类型

简写：

transition:all(全部或所有)/具体属性值    运动时间s/ms   延迟时间s/ms   动画类型;

动画类型示例图:

在这里插入图片描述

代码示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
     
            width: 200px;
            height: 50px;
            background-color: hotpink;
            /* 需要参与过渡的属性 */
            /* transition-property: width, height, background-color; */

            transition-property: all;

            /* 过渡时间 */
            transition-duration: 1s;

            /* 延迟时间 */
            transition-delay: 2s;
            /* 检索或设置对象中过渡的动画类型 */
            transition-timing-function：ease-in;
            /* 简写形式 */
            transition: all 1s 2s ease-in;
        }
        div:hover{
     
            width: 50px;
            height: 200px;
            background-color: greenyellow;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

二、2D属性

transform 该属性允许我们对元素进行旋转、缩放、移动。

位移语法:

1、translate()

将元素向指定的方向移动，类似于position中的relative。

如：transform: translate(100px, 0px);

第一个参数:水平方向

第二个参数:垂直方向

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
     
            width: 200px;
            height: 200px;