【CSS动画02--卡片旋转3D】

CSS动画02--卡片旋转3D

  • 介绍
  • 代码
    • HTML
    • CSS

css动画02--旋转卡片3D

介绍

当鼠标移动到中间的卡片上会有随着中间的Y轴进行360°的旋转,以下是几张图片的介绍,上面是鄙人自己录得一个供大家参考的小视频🤭
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

代码

HTML

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

    <title>旋转卡片3D</title>
    <link rel="stylesheet" href="./css/2.css">
</head>

<body>
    <div class="card">
        <div class="front">
            <p>Let Us Miss!</p>
        </div>
        <div class="back">
            <p>Karry~</p>
            <p>JackSon~</p>
            <p>Roy~</p>
            <p>Clover~</p>
        </div>
    </div>
</body>

</html>

CSS

*{
    margin:0;
    padding:0;
}
body{
    /* 弹性布局,让页面元素水平+垂直居中 */
    display: flex;
    justify-content: center;
    align-items: center;
    /* 设置body高度为100%窗口高度 */
    height:100vh;
    /* 背景渐变色 */
    background-image: linear-gradient(200deg,#5ee7df,#b490ca);
    /* 大家看到不同了吗?不过看起来有些许夸张 */
    /* 现在就正常多啦 */
    /* 没加这个属性之前,我们的动画看起来有点生硬,没有任何立体感,所以我们需要添加这个属性来增加卡片旋转时的立体感,这个值越小,立体感就会越明显,立体感最明显的地方就是近大远小,这个的意思就是设置视距,相当于你的眼睛离一个东西的距离,当这个东西离你的眼睛越近,那么这个东西就会越大 */
    perspective: 1000px;
}
.card{
    /* 相对定位 */
    position: relative;
    width: 300px;
    height: 450px;
    /* 圆角 */
    border-radius: 30px;
    /* 鼠标移到元素上光标变为小手 */
    cursor: pointer;
    background-color: #fff;
    /* 盒子阴影 */
    box-shadow: 1px 1px 20px rgba(0,0,0,0.1);
    /* 给父元素添加一个3D盒子属性,那么子元素就到背面了,这个属性是加到父元素上的,但是影响的是子元素 */
    transform-style: preserve-3d;
    /* 给卡片添加默认动画 */
    animation: rotate-reverse 1.2s cubic-bezier(0.66,-0.47,0.33,1.5) forwards;
}
/* 设置鼠标移入卡片时执行动画 */
.card:hover{
    /* 动画(名称 时长 第三个属性是贝塞尔曲线,我们可以自定义动画的运动轨迹,让动画的运动轨迹有了很多种可能 第四个属性是当我们的动画完成时的状态,一般动画完成之后就回到了0%的状态,默认值是backwards,当我们给的属性值是forwards时,那么动画到100%的时候就会停下来,不会回到0%) */
    animation: rotate 1.2s cubic-bezier(0.66,-0.47,0.33,1.5) forwards;
}
.front,.back{
    /* 绝对定位 子元素是绝对定位,父元素需要相对定位 */
    position:absolute;
    top: 0;
    left: 0;
    width:100%;
    height:100%;
    /* 弹性布局,让元素垂直陈列 */
    display: flex;
    flex-direction: column;
    /* 现在子元素垂直陈列,那么就是让子元素水平居中 */
    align-items: center;
    /* 平均分配高度给每一个子元素 */
    justify-content: space-around;
    font-size: 20px;
    background-color: #fff;
    border-radius: 30px;
    /* 隐藏旋转div元素的背面 */
    backface-visibility: hidden;
}
.back{
    /* 因为背面卡片要到后面去,所以我们给背面卡片加一个沿Y轴旋转180度的属性,这里我们可以看到旋转了,但是没到后面去,原因就是父盒子现在不是3D盒子,而是一个2D盒子,所以我们需要让父元素变成一个3D盒 */
    transform: rotateY(180deg);
}
/* 接下来我们定义一下旋转动画 */
@keyframes rotate{
    0%{
        transform: rotateY(0deg);
    }
    100%{
        transform: rotateY(180deg);
    }
}
@keyframes rotate-reverse{
    0%{
        transform: rotateY(180deg);
    }
    100%{
        transform: rotateY(0deg);
    }
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/80778.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

计算机视觉--距离变换算法的实战应用

前言&#xff1a; Hello大家好&#xff0c;我是Dream。 计算机视觉CV是人工智能一个非常重要的领域。 在本次的距离变换任务中&#xff0c;我们将使用D4距离度量方法来对图像进行处理。通过这次实验&#xff0c;我们可以更好地理解距离度量在计算机视觉中的应用。希望大家对计算…

MobaXterm网络远程工具介绍下载安装破解使用

一、介绍 obaXterm 是远程计算机的工具箱。在单个 Windows 应用程序中&#xff0c;它提供了大量为程序员、网站管理员、IT 管理员量身定制的功能。 MobaXterm 为 Windows 桌面提供了重要的远程网络工具&#xff08;SSH、X11、RDP、VNC、FTP、MOSH 等&#xff09;和Unix 命令&a…

Unity 找不到 Navigation 组件的解决

当我们想利用unity 里面的Navigation 组件来实现我们的物体的自动导航时&#xff0c;有时竟然会发现我们的菜单栏里面找不到 该组件 这时我们应该怎么办&#xff1f; 请确保你的项目中已经导入了Unity的AI模块。要导入该模块&#xff0c;请打开"Project Settings"&am…

计算机网络----CRC冗余码的运算

目录 1. 冗余码的介绍及原理2. CRC检验编码的例子3. 小练习 1. 冗余码的介绍及原理 冗余码是用于在数据链路层的通信链路和传输数据过程中可能会出错的一种检错编码方法&#xff08;检错码&#xff09;。原理&#xff1a;发送发把数据划分为组&#xff0c;设每组K个比特&#…

pytest自动化测试框架,真正做到从0到1由浅入深详细讲解【万字级】

目录 嗨咯铁汁们&#xff0c;很久不见&#xff0c;我还是你们的老朋友凡叔&#xff0c;这里也感谢各位小伙伴的点赞和关注&#xff0c;你们的三连是我最大的动力哈&#xff0c;我也不会辜负各位的期盼&#xff0c;这里呢给大家出了一个pytest自动化测试框架由浅入深详细讲解。 …

Tomcat日志中文乱码

修改安装目录下的日志配置 D:\ProgramFiles\apache-tomcat-9.0.78\conf\logging.properties java.util.logging.ConsoleHandler.encoding GBK

thinkphp6前后端验证码分离以及验证

1.验证码接口生成验证码: public function verify(){return captcha(); } 也可以自己写方法 2.验证方法和普通模式session验证有区别,需要改原文件: 修改后的代码: <?php // +---------------------------------------------------------------------- // | ThinkP…

[oneAPI] 使用字符级 RNN 生成名称

[oneAPI] 使用字符级 RNN 生成名称 oneAPI特殊写法使用字符级 RNN 生成名称Intel Optimization for PyTorch数据下载加载数据并对数据进行处理创建网络训练过程准备训练训练网络 结果 参考资料 比赛&#xff1a;https://marketing.csdn.net/p/f3e44fbfe46c465f4d9d6c23e38e0517…

万字长文·通俗易懂·一篇包掌握——输入/输出·文件操作(c语言超详细系列)(二)

前言&#xff1a;Hello&#xff0c;大家好&#x1f618;&#xff0c;我是心跳sy&#xff0c;上一节我们主要学习了格式化输入输出的基本内容&#xff0c;这一节我们对格式化进行更加深入的了解&#xff0c;对文件概念进行介绍&#xff0c;并且对输入、输出与文件读写的基本概念…

Next.js - Pages and Layouts

Pages 页面是路由独有的用户界面。你可以通过从 page.js 文件导出组件来定义页面。使用嵌套文件夹定义路由&#xff0c;并使用 page.js 文件公开访问路由。 // app/page.tsx is the UI for the / URL export default function Page() {return <h1>Hello, Home page!<…

设计模式之适配器模式(Adapter)的C++实现

1、适配器模式的提出 在软件功能开发中&#xff0c;由于使用环境的改变&#xff0c;之前一些类的旧接口放在新环境的功能模块中不再适用。如何使旧接口能适用于新的环境&#xff1f;适配器可以解决此类问题。适配器模式&#xff1a;通过增加一个适配器类&#xff0c;在适配器接…

QT的mysql(数据库)最佳实践和常见问题解答

涉及到数据库&#xff0c;首先安利一个软件Navicat Premium&#xff0c;用来查询数据库很方便 QMysql驱动是Qt SQL模块使用的插件&#xff0c;用于与MySQL数据库进行通信。要编译QMysql驱动&#xff0c;您需要满足以下条件&#xff1a; 您需要安装MySQL的客户端库和开发头文件…

Maven之JDK编译问题

IDEA Maven 默认使用 JDK 1.5 编译问题 IDEA 在「调用」maven 时&#xff0c;IDEA 默认都会采用 JDK 1.5 编译&#xff0c;不管你安装的 JDK 版本是 JDK 7 还是 JDK 8 或者更高。这样一来非常不方便&#xff0c;尤其是时不时使用 JDK 7/8 的新特性时。如果使用新特性&#xff…

【二叉树前沿篇】树

【二叉树前沿篇】树 1 树的概念2. 树的相关概念3. 树的表示4. 树在实际中的运用&#xff08;表示文件系统的目录树结构&#xff09; 1 树的概念 树是一种非线性的数据结构&#xff0c;它是由n&#xff08;n>0&#xff09;个有限结点组成一个具有层次关系的集合。把它叫做树是…

Python项目实战:基于napari的3D可视化(点云+slice)

文章目录 一、napari 简介二、napari 安装与更新三、napari【巨巨巨大的一个BUG】四、napari 使用指南4.1、菜单栏&#xff08;File View Plugins Window Help&#xff09;4.2、Window&#xff1a;layer list&#xff08;参数详解&#xff09;4.3、Window&#xff1a;layer…

grafana-zabbix基础操作篇------导入数据源

文章目录 一、grafana的安装1.1、下载地址1.2、下载后导入所安装机器1.3、yum安装解决依赖1.4、启动grafana1.5、查看端口是否启用&#xff08;端口默认3000&#xff09;1.6、浏览器访问 二、添加zabbix数据源2.1、导入数据源 **下一篇 我们讲讲构建仪表板的操作** 今天&#x…

SAP ABAP SQL查询语句-内连接与左连接使用

SQL查询语句-内连接与左连接使用 程序: data:begin of itab OCCURS 0,material type /bic/oizmaterial,batch type /bi0/oibatch,brd type /bic/oizzbrd,cpquabu type /bi0/oicpquabu,end of itab. *&**例一: clear: itab[]. select * into corresponding fields…

OpenLayers实战,OpenLayers判断点位是否与多边形有交集,判断车辆是否在电子围栏内

专栏目录: OpenLayers实战进阶专栏目录 前言 OpenLayers实战,OpenLayers判断点位是否与多边形有交集,可以用于判断车辆是否在电子围栏内,船舶是否在锚泊位中等常用案例。 在实际GIS地图业务开发中,一般是不会在前端实现是否在电子围栏这种计算的。 如果有人让你在前端实…

【数据结构】 单链表面试题讲解

文章目录 引言反转单链表题目描述示例&#xff1a;题解思路代码实现&#xff1a; 移除链表元素题目描述&#xff1a;示例思路解析&#xff1a; 链表的中间结点题目描述&#xff1a;示例&#xff1a;思路解析代码实现如下&#xff1a; 链表中倒数第k个结点题目描述示例思路解析&…

SpringBoot统⼀功能处理

前言&#x1f36d; ❤️❤️❤️SSM专栏更新中&#xff0c;各位大佬觉得写得不错&#xff0c;支持一下&#xff0c;感谢了&#xff01;❤️❤️❤️ Spring Spring MVC MyBatis_冷兮雪的博客-CSDN博客 本章是讲Spring Boot 统⼀功能处理模块&#xff0c;也是 AOP 的实战环节&…