本文将深入探讨css动画中transform属性，这是一种强大的工具，可以实现元素的旋转、缩放、移动和倾斜等效果。本文将通过详细的解释和实际案例，帮助你掌握transform属性的使用方法来增强你的网页设计。

1.什么是Transform属性？

CSS3的transform属性允许你对元素应用各种图形转换效果，而不仅仅是改变它们的位置。这些转换包括旋转（rotate）、缩放（scale）、移动（translate）、倾斜（skew）等。

2.Transform的基本用法

旋转（Rotate）

使用rotate函数，你可以围绕一个元素的中心点旋转它，参数是一个角度，如deg（度）

transform: rotate(45deg);

缩放(Scale)
sca1e函数允许你改变元素的大小。数值大于1表示放大，小于1表示缩小：

transform: scale(1.5);

移动(Translate)
trans1ate函数可以移动元素从一个位置到另一个位置，参数是x轴和y轴上的距离：

transform: translate(50px, 100px);

倾斜(Skew)
skew函数可以让元素沿着X轴和Y轴倾斜，参数是倾斜的角度：

transform: skew(30deg, 20deg);

3.为产品列表添加动态效果

3.1HTML

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Transform Example</title>

    <link rel="stylesheet" href="styles.css">

</head>

<body>

    <ul class="product-list">

        <li class="product">

            <img src="product1.jpg" alt="Product 1">

            <span class="description">Product 1 Description</span>

        </li>

        <li class="product">

            <img src="product2.jpg" alt="Product 2">

            <span class="description">Product 2 Description</span>

        </li>

        <li class="product">

            <img src="product3.jpg" alt="Product 3">

            <span class="description">Product 3 Description</span>

        </li>

    </ul>

</body>

</html>

3.2CSS

.product-list {

    list-style: none;

    padding: 0;

    display: flex;

    justify-content: space-around;

}

.product {

    position: relative;

    overflow: hidden;

}

.product img {

    width: 200px;

    height: auto;

    transition: transform 0.5s ease;

}

.product .description {

    position: absolute;

    bottom: 0;

    left: 0;

    right: 0;

    background: rgba(0, 0, 0, 0.7);

    color: white;

    text-align: center;

    visibility: hidden;

    opacity: 0;

    transition: visibility 0s, opacity 0.5s linear;

}

.product:hover img {

    transform: scale(1.1);

}

.product:hover .description {

    visibility: visible;

    opacity: 1;

}

CSS:Transform属性的更多相关文章

  1. 理解SVG坐标系统和变换： transform属性

    SVG元素可以通过缩放,移动,倾斜和旋转来变换-类似HTML元素使用CSS transform来变换.然而,当涉及到坐标系时这些变换所产生的影响必然有一定差别.在这篇文章中我们讨论SVG的transf ...

  2. No.3 - CSS transition 和 CSS transform 配合制作动画

    课程概述 作业提交截止时间:09-01 任务目的 深度理解掌握 transition-timing-function 以及它的意义 学会配合使用 CSS transform 和CSS transiti ...

  3. CSS Transform / Transition / Animation 属性的区别

    back21 Jun 2011 Category: tech Tags: css 最近想UI的动画转到css3能吃进3d加速的属性上面来以加强动画的连贯性.只是对于css几个新加的属性不太熟悉,常常容 ...

  4. css transform旋转属性

    将以下代码复制到本地就可以看到效果: <!DOCTYPE html> <html lang="en"> <head> <meta char ...

  5. css之transform属性的使用

    1.定义:Transform属性应用于元素的2D或3D转换.这个属性允许你将元素旋转,缩放,移动,倾斜等. 2.常用的属性值: (1)translate(移动):   这个属性值里面含有三个参数,依次 ...

  6. CSS will-change 属性

    介绍 如果你注意到在webkit的浏览器上“flicker”一些CSS操作(尤其是变形和动画方面的)的表现,你很可能之前就注意过硬件加速了 CPU.GPU和硬件加速 硬件加速意味着Graphics P ...

  7. css动画属性性能

    性能主要表现:流量.功耗与流畅度 在现有的前端动画体系中,通常有两种模式:JS动画与CSS3动画. JS动画是通过JS动态改写样式实现动画能力的一种方案,在PC端兼容低端浏览器中不失为一种推荐方案. ...

  8. [转] CSS direction属性简介与实际应用 ---张鑫旭

    一.用的少并不代表没有用 至少,在我接触的这么多项目里,没有见到使用过CSS direction属性做实际开发的. 为什么呢?是因为direction长得丑吗? 虽然说direction确实其貌不扬, ...

  9. CSS动画属性性能详细介绍

    CSS动画属性会触发整个页面的重排relayout.重绘repaint.重组recomposite Paint通常是其中最花费性能的,尽可能避免使用触发paint的CSS动画属性,这也是为什么我们推荐 ...

  10. 【转载】CSS direction属性简介与实际应用

    文章转载自 张鑫旭-鑫空间-鑫生活 http://www.zhangxinxu.com/wordpress/ 原文链接:http://www.zhangxinxu.com/wordpress/?p=5 ...

随机推荐

  1. vue之element图标库使用与第三方阿里云图标库使用

    1.背景 2.element图标库使用 假设要做一个如下效果 代码如下: <!-- 输入框--> <el-form label-width="0px" class ...

  2. 这应该是全网最全的CSP-S初赛复习吧

    点我到洛谷看 \(Update\ 2024/8/2:\) 加入了在数据结构中增加了"树",做出部分更改. linux基础命令 cd 切换目录 ls 列出目前工作目录所含的文件及子目 ...

  3. 生态兼容性进一步提升！白鲸开源 WhaleStudio 与火山引擎ByteHouse完成产品互认

    数据作为新型生产要素,已快速融入生产.分配.流通.消费和社会服务管理等各环节,深刻改变着生产方式.生活方式和治理方式.越来越多企业也在尝试充分利用数据要素,开辟全新发展路径,进一步实现业务价值提升. ...

  4. 2024九省联考 数学 T19

    寒假有朋友打电话吐槽九省联考,看了眼数学卷子感觉非常刺激.刚开学没事干,试着做一下 \(19\). (\(17\) 分) 离散对数在密码学中有重要的应用.设 \(p\) 是素数,集合 \(X=\{1, ...

  5. layui表格中格式化日期

    layui表格中格式化日期 //1.引入 util layui.use(['table', 'admin'], function () { var util = layui.util; //2.表格内 ...

  6. idea下spring切换jdk版本

    1.首先打开项目配置设置 2. 修改project中的配置 3. 修改modules中的配置 这个方法不需要修改pom.xml文件 如果有问题请指正   及时修改 2022年9月10日16:42:16

  7. 2024年智能革命：HarmonyOS NEXT与盘古大模型5.0的颠覆性融合

    引言 2024年,这一年注定在全球智能设备市场的历史上写下浓墨重彩的一笔.作为全球科技巨头,华为再次以其前瞻性的布局,推动了技术与应用的深度融合.在这个充满变革的时代,华为通过不断扩展的鸿蒙生态系统, ...

  8. Linux 网络设备命名规则

    在 Linux 系统中,网络接口的命名规则已经经历了几次重要变化,特别是从传统的以 eth 和 wlan 开头的名称,转变到更现代.更具描述性的命名方式.以下是这些变化的概述: 1. 传统命名约定 在 ...

  9. Go语言中的交互式CLI开发：survey库简介

    在构建命令行工具时,良好的用户交互体验至关重要.尤其是在需要与用户进行复杂输入的场景下,传统的命令行参数和标志可能显得笨拙.github.com/AlecAivazis/survey/v2 是一个为 ...

  10. 调用ArrayList的add方法抛异常UnsupportedOperationException

    调用ArrayList的add方法抛异常UnsupportedOperationException 对于一些想要把数组转成List的需求,可能会使用到Arrays.asList()获取List对象,但 ...