本文将深入探讨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. Gradle工程编译报错:Cause: org.jetbrains.plugins.gradle.tooling.util.ModuleComponentIdentifierImpl.getModuleIdentifier()Lorg/gradle/api/artifacts/ModuleIdentifier;

    1.背景 从git上拉取代码后,编译报错如下: Cause: org.jetbrains.plugins.gradle.tooling.util.ModuleComponentIdentifierIm ...

  2. UE Websocket 通信

    项目中遇到UE需要对接Websocket协议接收实时数据. 所以需要实现一个Websocket Client的功能. 由于UE引擎已经集成了Websocket库(基于libwebsocket),可以通 ...

  3. Apache DolphinScheduler 3.2.2 版本正式发布！

    Apache DolphinScheduler 3.2.2 版本正式发布! 近日,Apache DolphinScheduler 发布了 3.2.2 版本.此版本主要基于 3.2.1 版本进行了 bu ...

  4. 这篇 DolphinScheduler on k8s 云原生部署实践，值得所有大数据人看！

    在当前快速发展的技术格局中,企业寻求创新解决方案来简化运营并提高效率成为一种趋势. Apache DolphinScheduler作为一个强大的工具,允许跨分布式系统进行复杂的工作流任务调度.本文将深 ...

  5. BMC Genomics | 综合代谢组学和转录组学分析揭示了菊花黄酮和咖啡酰奎宁酸的生物合成机制

    杭白菊是一种流行的药用和食用植物,主要通过黄酮类和咖啡酰奎宁酸(CQAs)的存在发挥其生物活性.然而,菊花头状花序中黄酮和CQA生物合成的调控机制尚不清楚. 本研究采用高效液相色谱法测定了菊花头状花序 ...

  6. Camera | 1.Camera基础知识

    一口君最近在玩瑞芯微的板子,之前写了几篇基于瑞芯微的文章,大家可以学习一下. <瑞芯微rk356x板子快速上手> <Linux驱动|rtc-hym8563移植笔记> <L ...

  7. redux开发中的一个小坑

    redux的actiontypes,不可以重名,重名将会报错 When called with an action of type "inserttoken", the slice ...

  8. python项目生成exe

    前言 做了个python的小项目,需要打包为桌面端的exe使用,结果一打包,体积直接上百兆了,研究了下,使用虚拟环境打出的包会更干净小巧. 安装anaconda anaconda用作python的虚拟 ...

  9. 小tips：ECMA-262定义的7种错误类型

    七种错误类型如下: Error EvalError RangeError ReferenceError SyntaxError TypeError URIError 其中,Error是基类型(其他六种 ...

  10. docker基础镜像java版本选择和推荐

    背景 在编写dockerfile时,基础镜像要么太大,要么缺少jdk:dockerhub中的openjdk五花八门,不知道选择哪个 解决方案 我在项目中通常选择 openjdk作为基础镜像 FROM ...