您现在的位置是:首页 > 正文

两面翻转的盒子

2024-02-01 06:44:47阅读 2

一直都很喜欢这种花里胡哨的东西,这次先尝试了下文字,下次可以试试图片。

时间:2022/01/23

html代码

 <div class="box">

              <div> 天官赐福</div>

               <div>百无禁忌</div>

</div>

css代码

<style>

          body{

              perspective:400px;

              /* 透视才能更好看清3D效果 */

          }

          .box{

              position:relative;

              width: 200px;

              height: 200px;

              margin:100px auto;

              transform-style:preserve-3d;

              /*前一行 因为子盒子要旋转 */

              transition:all .5s;

          }

          .box:hover{

              transform:rotateY(180deg);

              /* 鼠标经过父盒子旋转 */

          }

          .box div{

              position:absolute;

              left:0;

              right:0;

              /* 前三行让前面的盒子和后面的盒子重叠 */

              width: 100%;

              height: 100%;

              background-color: cadetblue;

              border-radius: 50%;

              text-align:center;

              line-height:200px;

              /* 前两行让文字在盒子里水平,垂直居中 */

              font-size:25px;

              color:#fff;

          }

          .box div:last-child{

              background-color: coral;

              transform:rotateY(180deg);

              /* 最后一行让后面的盒子旋转180度,

              当父盒子旋转时后面的盒子里的文字不会变形 */

          }

      </style>

网站文章

  • java项目-第43期ssm项目前台+后台小说在线阅读系统

    项目简述 该项目是一款前后端交互的小说阅读系统,用户登录后可以查看各种小说章节。后台管理员进行小说维护 前台包含以下模块: 首页、最新上架图书、热门图书排行、个人中心 后台包含以下模块:个人信息模块、通用户管理、会员用户管理、支付记录管理、 会员余额查询、图书类别管理、图书信息管理、书评信息管理

    2024-02-01 06:44:41
  • 【机器学习模型详细推导5】-朴素贝叶斯分类

    朴素贝叶斯分类一. 朴素贝叶斯分类介绍二. 算法推导详解三. 附上《统计学习方法》中的算法流程一. 朴素贝叶斯分类介绍首先,对于更定数据集{(x1,y1),(x2,y2),…,(xm,ym)}\{ (...

    2024-02-01 06:44:36
  • 内置对象-Date对象(获取年月日-时分秒)

    内置对象-Date对象(获取年月日-时分秒)

    测试代码<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Com...

    2024-02-01 06:44:10
  • java 请求超时处理_java请求超时处理

    package com.it;import java.io.ByteArrayOutputStream;import java.io.IOException;import java.io.InputS...

    2024-02-01 06:44:02
  • 【maven】自定义构建maven的jar包依赖

    【maven】自定义构建maven的jar包依赖

    自己定义自己的maven的jar包依赖,本地版本。

    2024-02-01 06:43:55
  • 谷歌裁员1.2万人,CEO年薪达15亿,网友:“地表最强 CEO !”

    谷歌裁员1.2万人,CEO年薪达15亿,网友:“地表最强 CEO !”

    在竞争激烈的科技行业,大佬的薪酬往往是敏感话题。年初时,曾拿下 1.25 亿美元年终奖的“地表最强打工人”、苹果公司 CEO 库克,因降薪 40%的话题登上热搜,让大家倍感惊讶。(图源:彭博社截图)4...

    2024-02-01 06:43:24
  • Java 的引用

    在 Java 中引用可以分为强引用、软引用、弱引用、虚引用。

    2024-02-01 06:43:17
  • 医学计算机应用研究的意义,肝CT图像分析的临床与计算机应用研究

    摘要:目的:研究肝硬化CT肝实质形态分级与CT肝脾容积测量相结合对肝硬化CT定量诊断和肝切除术前肝储备功能评估的临床应用价值,并探索计算机自动测量的方法及其可行性. 方法:(1) 用CT机分别测量50...

    2024-02-01 06:43:10
  • springBoot中实现分页查询

    SpringBoot中实现条件分页查询

    2024-02-01 06:43:03
  • 阿里云ECS服务器挂载磁盘 热门推荐

    阿里云ECS服务器挂载磁盘 热门推荐

    买了阿里云的ECS云服务器,本机赠送20GB的磁盘,感觉不够用,又买了一块500GB的磁盘,本文就是记录怎么把这500GB的磁盘挂载上。 检查现在磁盘情况 我们可以看到买的那个500GB的磁盘没有出现,说明没有挂载上。 查看硬盘个数及分区 我们可以看到那块500GB的磁盘:/dev/xvdb 对这块500GB的硬盘进行分区 再次查看磁盘个数及分区 可以看到新的分区:/dev/xvd

    2024-02-01 06:42:34