<!DOCTYPE html><html><head> ???<title>筱白迩</title> ???<style type="text/css"> ???????*{ ???????????margin: 0; ???????????padding: 0; ???????????/*font-family: 微软雅黑;*/ ???????} ???????body{ ???????????background-color: black; ???????????perspective: 800px; ???????} ???????@keyframes go{ ???????????0%{ ???????????????transform: rotateX(45deg); ???????????} ???????????50%{ ???????????????transform: rotateX(-45deg); ???????????} ???????????100%{ ???????????????transform: rotateX(45deg); ???????????} ???????} ???????.box{ ???????????width: 1000px; ???????????height: 350px; ???????????/*background-color: green;*/ ???????????margin: 165px auto; ???????????border: 5px solid #666; ???????????border-radius: 20px; ???????????animation: go 5s infinite linear; ???????} ???????.box:hover{ ???????????animation-play-state: paused; ???????} ???????.box ul{ ???????????display: flex; ???????????list-style: none; ???????????????????????????????????height: 350px; ???????????????????} ???????.box ul li{ ???????????width: 200px; ???????????height: 300px; ???????????/*background-color: green;*/ ???????????margin: auto; ???????????transform-style: preserve-3d; ???????} ???????.box ul li img{ ???????????width: 200px; ???????????height: 300px; ???????????border: 2px solid #fff; ???????????transition: 1s; ???????} ???????.box ul li .text{ ???????????width: 200px; ???????????height: 300px; ???????????background-color: black; ???????????position: absolute; ???????????transform: rotateY(-90deg); ???????????margin-top: -304px; ???????????transition: 1s; ???????} ???????.box ul li:hover .text{ ???????????transform: rotateY(0deg); ???????} ???????.box ul li:hover img{ ???????????transform: rotateY(90deg); ???????} ???????.box ul li .text h3{ ???????????color: #fff; ???????????text-align: center; ???????????font-size: 26px; ???????????line-height: 80px; ???????} ???????.box ul li .text p{ ???????????color: #fff; ???????????text-indent: 2em; ???????????font-family: 微软雅黑; ???????????line-height: 30px; ???????} ???????????</style></head><body> ???<div class="box"> ???????<ul> ???????????<li><img src="1.0.jpg"> ???????????<div class="text"> ???????????????<h3>执笔天下</h3> ???????????????<p> ???????????????????继承了兴复志向 任生死何妨（姜维） ????????????????????那连环赤壁永不灭的火光（庞统） ????????????????????奇谋在汉中征伐里 恩怨的流淌（法正） ????????????????????亲情牵扯无言的彷徨 走马荐丞相（徐庶） ???????????????</p> ???????????</div> ???????????</li> ???????????<li> ???????????<img src="3.png"> ???????????<div class="text"> ???????????????<h3>执笔红妆</h3> ???????????????<p> ???????????????????一声烈弓惊响 不顾满头风霜（黄忠） ????????????????????子午献策轻狂 南谷自溃亡（魏延） ????????????????????夫人何必感伤 再起也辉煌（孟获） ????????????????????定计攻心平南疆 挥泪军营旁（马谡） ???????????????</p> ???????????</div> ???????????</li> ???????????<li> ???????????<img src="3.jpg"> ???????????<div class="text"> ???????????????<h3>执笔书画</h3> ???????????????<p> ???????????????????我回首看那长坂坡百万刀枪 ????????????????????谁知龙胆内有多重的担当（赵云） ????????????????????举目望 望不到割须弃袍的模样 ????????????????????虽是铁骑突围离西凉 此生必回乡（马超） ???????????????</p> ???????????</div> ???????????</li> ???????????<li> ???????????<img src="4.jpg"> ???????????<div class="text"> ???????????????<h3>执笔花甲</h3> ???????????????<p> ???????????????????我漂泊流浪 辗转在乱世的沙场 ????????????????????誓挽救战火中大汉的危亡（刘备） ????????????????????数十年纷争怎忍见苍生的目光 ????????????????????抬头一叹只愿天下有 安乐的希望（刘禅） ???????????????</p> ???????????</div> ???????????????</li> ???????</ul> ???</div></body></html>CSS 3D翻转相册动画特效
原文地址：https://www.cnblogs.com/a252336799/p/8511577.html