2D&3D 转换与动画

苏一一

已于 2022-11-18 11:01:09 修改

阅读量98

点赞数

文章标签： 3d css css3

于 2022-11-18 11:01:01 首次发布

本文链接：https://blog.csdn.net/weixin_45789701/article/details/127918295

版权

iconfont库

1.上传

得到 .svg 格式的矢量图

iconFont网站上传图标

2.下载

加入购物车

添加至项目

3.引入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入iconfont css文件 -->
    <link rel="stylesheet" href="./iconfont/iconfont.css">
</head>
<body>
    <!-- 1.引入两个类名 -->
    <!-- 2.第一个类名固定  -->
    <!-- 3.第二个类名打开iconfont.html文件 点击Font class复制第二个类名-->
    <i class="iconfont icon-favorites-fill"></i>
</body>
</html>

过渡（transition）

语法：

transition: transition-property transition-duration transition-timing-function transition-delay;
		transition-property: 过渡属性，指定属性的name、transition效果（默认值为all）

		transition-duration: 过渡效果需要多久时间完成，指定完成过渡的时间。（单位：s/ms）

		transition-timing-function: 指定完成过渡的曲线。（是匀速还是非匀速）

		transition-delay: 指定延迟时间。（延迟多久后开始执行）

平面转换（transform）

位移

语法：

语法：
transform: translate(水平移动距离， 垂直移动距离)

基础使用：


基础使用：
    <style>
        .father {
            width: 500px;
            height: 300px;
            margin: 100px auto;
            border: 1px solid #000;
        }
        
        .son {
            width: 200px;
            height: 100px;
            background-color: pink;
            transition: all 0.5s;
        }
    
        /* 鼠标移入到父盒子，son改变位置 */
        .father:hover .son {
            /* transform: translate(100px, 50px); */

            /* 百分比: 盒子自身尺寸的百分比 */
            /* transform: translate(100%, 50%); */
            
            /* 只给出一个值表示x轴移动距离 */
            /* transform: translate(100px); */
            /* y轴移动距离 */
            transform: translateY(100px);
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>

定位居中：

定位居中：
    <style>
        .father {
            position: relative;
            width: 500px;
            height: 300px;
            margin: 100px auto;
            border: 1px solid #000;
        }
        .son {
            position: absolute;
            left: 50%;
            top: 50%;
            /* margin-left: -100px;
            margin-top: -50px; */
            transform: translate(-50%, -50%);
            width: 203px;
            height: 100px;
            background-color: pink;          
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>

旋转

语法：

语法：
transform: rotate(角度(单位：deg));

基础使用：

<style>
        img {
            width: 250px;
            transition: all 2s;
        }
        
        img:hover {
            /* 顺时针旋转 */
            transform: rotate(360deg);

            /* 逆时针旋转 */
            /* transform: rotate(-360deg); */
        }
    </style>
</head>
<body>
    <img src="" alt="">
</body>

旋转原点：

语法：

transform-origin: 原点水平位置 原点垂直位置;
方位名词： left top right bottom center

<style>
        img {
            width: 250px;
            border: 1px solid #000;
            transition: all 2s;
            transform-origin: right bottom;
            transform-origin: left bottom;
        }
        
        img:hover {
            transform: rotate(360deg);
        }
    </style>
</head>
<body>
    <img src="" alt="">
</body>

缩放

语法：

transform: scale(x轴缩放倍数， y轴缩放倍数)
技巧
/* 等比例缩放 */
transform: scale(缩放倍数)

基础使用：

<style>
        .box {
            width: 300px;
            height: 210px;
            margin: 100px auto;
            background-color: pink; 
        }
        .box img {
            width: 100%;
            transition: all 0.5s;
        }
        .box:hover img {
            /* width: 150%; */
            transform: scale(1.2);
            transform: scale(0.8);
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="" alt="">
    </div>
</body>

复合使用

语法：

transform: translate() rotate();

渐变

语法：

background-image: linear-gradient(
	transparent,/* 透明 */
	rgba(0,0,0, .6) /* 灰色 */
);

基础使用：

<style>
        .box {
            width: 300px;
            height: 200px;
            /* background-image: linear-gradient(
                pink,
                green,
                hotpink
            ); */
            background-image: linear-gradient(
                transparent,
                rgba(0,0,0, .6)
            );
        }
    </style>
</head>

<body>

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

空间转换

空间位移

语法：

transform: translate3d(x, y, z);
transform: translateX(值)
transform: translateY(值)
transform: translateZ(值)

透视( perspective )

语法：

perspective: 值;
/* 
取值：像素单位数值，数值一般在800 - 1200 
给父级添加属性
*/

空间旋转

语法：

transform: rotateZ(角度(单位：deg));
transform: rotateX(角度(单位：deg));
transform: rotateY(角度(单位：deg));
/* 自定义旋转轴 旋转 */
transform: rotate(x, y, z,角度(单位：deg));

立体呈现

语法：

transform-style: preserve-3d;
/* 
给父级添加属性
使子元素处于真正的3d空间
*/

空间缩放

语法：

transform: scaleX(倍数);
transform: scaleY(倍数);
transform: scaleZ(倍数);
transform: scale3d(x, y, z);

动画(animation)

定义动画：

1.@keyframes 动画名称 {
    form{}
    to{}
}
2.@keyframes 动画名称 {
    0%{}
    10%{}
    30%{}
    100%{}
}

使用动画：

animation: 动画名称 动画时长 速度曲线（linear(匀速)） 延迟时间 重复次数（infinite(无限循环)） 动画方向（alternate(反复)） 执行完毕时状态（forwards（停留结束的状态））;

补间动画

逐帧动画

停止动画

animation-paly-stale: paused;

苏一一

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫