CSS3之2D转换

最新推荐文章于 2024-08-17 22:24:13 发布

一份蛋炒饭

最新推荐文章于 2024-08-17 22:24:13 发布

阅读量45

点赞数

分类专栏： HTML 文章标签： css

本文链接：https://blog.csdn.net/weixin_52019215/article/details/115254024

版权

HTML 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

这篇博客详细介绍了CSS中的2D转换，包括translate、rotate、scale的使用方法及中心点设置。同时，讲解了如何结合使用这些转换实现复杂的动画效果，并探讨了动画的关键帧设置、时间函数和填充模式等概念。此外，还提到了opacity属性以及在有定位情况下如何调整转换限制。

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

<!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>
</head>
<body>
    <!-- 2D转换 -->

    <!-- 2D偏移translate -->
    <!-- transform: translate(x, y); -->
    <!-- transform: translate(50%, 50%);相对于自身的宽高偏移-->
    <!-- transform: translate(x, y);对于行内元素无效 对其他元素无影响 -->
    <!-- transform: translate(50px); 默认50px是对于x轴旋转的 -->
    <!-- transform: translateX(20px);-->
    <!-- transform: translateY(20px); -->

    <!-- 2D旋转rotate -->
    <!-- transform: rotate(-45deg);时逆针旋转 -->
    <!-- transform: rotate(.5turn);半圈--180deg-->

    <!-- 2D转换中心 -->
    <!-- transform-origin: x y; 转换中心点-->
    <!-- transform-origin: 0 0;左上角 -->
    <!-- transform-origin: center center;默认转换中心点 -->
    <!-- transform-origin: 50% 50%;默认转换中心点 -->
    <!-- transform-origin: left bottom; -->
    <!-- transform-origin: 50px 50px; -->
    <!-- origin可给rotate设置旋转中心点,translate上不明显-->

    <!-- 2D缩放scale -->
    <!-- transform: scale(x, y); x, y不带单位 -->
    <!-- transform: scale(2); width and height scale in same time -->
    <!-- transform: scale(left, bottom); scale at left and bottom -->
    <!-- transform: scale(bottom);  scale at bottom and center-->
    <!-- scale将会缩放父级盒子里面所有的内容 -->

    <!-- 2D综合写法 -->
    <!-- transform: translate(x, y) rotate(1turn) scale(2); -->
    <!-- tip1: order不同产生result不同 
        (rotate导致坐标轴方向发生变化,translate根据坐标轴方向发生偏移,从而导致位移方向随着旋转而变化)-->
    <!-- tip2: 一般将translate放在最前面 -->

    <!-- animation动画 -->
    <!-- 设置关键帧:@keyframes name(move) {
                from[0%] {
                    transform: translate(0, 0)
                }
                ........
                to[100%] {
                    transform: translate(1000px, 0)
                }
    } -->
    <!-- 调用动画div {
                    [div-css-style]
                    animation-name: move; 动画名称
                    animation-duration: 2s; 动画时间
                    animation-timimg-function: ease; (linear,ease-in, ease-out,ease-in-out)动画运行曲线
                    animation-timing-function: steps(6); 步长，指定了时间函数的间隔数量
                    animation-delay: 0s; 动画延时 1s == 1000ms
                    animation-iteration-count: 1; 动画重复次数(infinite无限)
                    animation-direction: normal[默认]; 正向运行动画  
                    animation-direction: alternate; 动画运行到结束状态时,再逆向运行动画
                    animation-direction: reverse; 逆向开始翻转播放
                    animation-direction: alternate-reverse; 逆向开始播放动画至结束状态后再返回运行
                    animation-fill-mode: backwards; 动画结束后,返回初始状态
                    animation-fill-mode: forwards; 动画结束后,停留在结束状态
                    animation-play-state: running; 动画运行
                    animation-play-state: paused; 鼠标经过时,动画暂停
                     } -->
    <!-- animation动画简写: -->
    <!-- animation: name duration timing-function delay iteration-count direction fill-mode;  -->
    <!-- animation: move 2s [linear] [0] [infinite] [alternate] [forwards]-->
    <!-- animation-play-state 单独写,一般与hover搭配使用 -->
    <!-- animation: [动画1]， [动画2];一个animation可以添加多个动画，之间用逗号 -->

    <!-- opacity透明度 -->
    <!-- opacity取值1-0 -->
    <!-- opacity不仅盒子本身设置了透明度，其里面的内容也会影响 -->
    <!-- opacity: .5; -->

    <!-- 如果有定位，会限制盒子转换的方向，需要添加transform属性改变此限制 -->

    <!-- transform只能给一个元素使用一次，多次使用会重叠掉原来的 -->



</body>
</html>

一份蛋炒饭

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3之2D转换

<!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>Doc
复制链接

扫一扫

专栏目录