【HTML+CSS】3d旋转相册-当前热讯
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"con...
2023-02-16
<!DOCTYPE html>
<html lang="en">
(相关资料图)
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
background-color: pink;
perspective: 1600px;
}
@keyframes xuanzhuan{
0%{
transform: rotateY(0);
}
100%{
transform: rotateY(360deg);
}
}
section{
position: relative;
width: 360px;
height: 360px;
transform-style: preserve-3d;
margin: 150px auto;
background-attachment: fixed;
background-position: center center;
animation: xuanzhuan 9s linear infinite;
background-size: cover;background-image: url(tp4.jpg);
}
section:hover{
animation-play-state: paused;
}
section .tp1{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-attachment: fixed;
background-position: center center;
background-size: cover;
background-image: url(tp1.jpg);
}
section .tp2{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-attachment: fixed;
background-position: center center;
background-size: cover;background-image: url(tp2.jpg);
}
section .tp3{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-attachment: fixed;
background-position: center center;
background-size: cover;background-image: url(tp3.jpg);
}
section .tp4{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-attachment: fixed;
background-position: center center;
background-size: cover;background-image: url(1.gif);
}
section .tp5{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-attachment: fixed;
background-position: center center;
background-size: cover;background-image: url(2.gif);
}
section .tp6{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-attachment: fixed;
background-position: center center;
background-size: cover;background-image: url(3.gif);
}
section div:nth-child(1){
transform: rotateY(60deg) translateZ(350px);
}
section div:nth-child(2){
transform: rotateY(120deg) translateZ(350px);
}
section div:nth-child(3){
transform: rotateY(180deg) translateZ(350px);
}
section div:nth-child(4){
transform: rotateY(240deg) translateZ(350px);
}
section div:nth-child(5){
transform: rotateY(300deg) translateZ(350px);
}
section div:nth-child(6){
transform: rotateY(360deg) translateZ(350px);
}
</style>
</head>
<body>
<section>
<div class="tp1"></div>
<div class="tp2"></div>
<div class="tp3"></div>
<div class="tp4"></div>
<div class="tp5"></div>
<div class="tp6"></div>
</section>
</body>
</html>
感谢支持！！！
你的三连就是对我创作的最大激励！！
因录制时出现了一点小差错可能会影响观看体验 望理解
素材来源：百度图片搜索
标签：
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"con...
2013年元旦放假怎么安排呢，2013年元旦放假安排3天，2013年元旦放假安排如下：2013年1月1日至2013年1月3日放假调休共3天。其中2013年1月1日为
机构：2022年电动汽车电池装机量达505GWh；根据市场研究机构EVVolumes15日发布的电动汽车市场分析报告，2
1、【浣溪沙】北宋-秦观漠漠轻寒上小楼，晓阴无赖似穷秋。2、淡烟流水画屏幽。3、自在飞花轻似梦，无边丝雨细如愁。4、宝帘闲挂小银钩。5、【
注：本文以iphone8plus为例，适用于iOS12系统。1、在桌面上找到[语音备忘录]，然后点按“打开”。、点击屏幕
5月27日是什么星座：5月27日是双子座5月27日出生的双子座口才一流喔!沟通能力绝佳、直言不讳、能够坚持己见的你，常常
"韩信点兵”是怎么回事？韩信点兵有两种说法，一种是民间故事，一种是算术题目。民间故事：韩信点兵的成语来源淮安民间传说。常与多多益...
1、《东邪西毒》无疑是公认的华语武侠片经典，在14年后人们依然对这部电影津津乐道，不仅是因为它那令人荡气回肠的情节设计，
阴历和阳历是我们日常生活中最为常用的两种纪年法，当然，阴历和阳历的区别也是比较多的，但是许多的朋友们对于阴历和阳历还不是
自1月18日以来，*ST新海连收15个跌停板，原因在于连续7年财报虚假记载。而股价命悬1元之际，2月14日，*ST新海实控人“放话”掏腰包增持。处罚
百万医疗险没有终身续保的。百万医疗保险的保障期限为一年，即缴纳一年保一年。但有的百万级的医疗保险可以保证续保，但也不能保
岭南，指中国南岭之南的汉地，其亦曾是唐代行政区岭南道之名，相当于现在广东、广西、海南全境及曾经属于中国皇朝统治的越南红河三角洲一带。
中国银行中午12点到1点是可以办卡的。午休时间为12点到1点，在这段时间里银行只可以办理储蓄业务，其他营业窗口在中午关闭
2月15日，汽车之家宣布成为百度文心一言（英文名：ERNIEBot）首批生态合作伙伴。后续，汽车之家将通过百度智能云
1、汪荃珍，女，汉族，河南正阳人，1963年出生，中共党员，研究生学历，国家一级演员，中国戏剧“梅花奖”、上海“白玉兰”戏剧表演奖获得...
夏弥来为大家解答以下的问题，王喆，说一说王喆的简介，现在让我们一起来看看吧！1、王喆，女，1982年4月4日出生于辽宁抚
中债指的是记账式国债，又称无纸化国债，指财政部利用无纸化方式发行，以计算机记账方式记帐，可在市场上交易的债券。记账式国债
中国是一个有着深厚文化底蕴的国家，在这个国家里人们接受的教育都是比较传统的。现如今这样的教育，被称之为传统教育。所以人们的思想也是非
证券时报网讯，中信证券指出，1月美国CPI数据显示出美国通胀下行路径将较为坎坷。未来美国通胀下降斜率不容乐观，同时美联储货币政策紧缩将高
1、铁路学校分数线是多少 一般来说各个地区各个省份的分数线各不相同的，分数线是由报考该学校学生的分数决定的，当比较多的
在校戴口罩吗？体育课怎么上？上海全面恢复线下教学，来看防疫新变化,教学,学校,教育,口罩,新学期,上海市,校外培训机构
4月13号，2016英雄联盟职业联赛（简称：LPL）的季后赛即将来临，这也是赛制修改后的第一次季后赛。本赛季季后赛及升降级赛同样将采用全新赛制
目前我国最大外资对冲基金的掌舵人是她,凯伦,桥水基金,投资基金,对冲基金
川贝炖雪梨的做法固然简单，而且功效颇多，下面是学习啦小编带来关于川贝炖雪梨的正确做法的内容，希望能让大家有所收获!川贝炖雪梨的做法一材
大疆目前的消费级无人机主要分为三个系列，包括Mini系列、Air系列和Mavic系列。其中Mini系列主打入门级消费无人机市场，同时具有很高的性价比
出租房屋要交什么税，房屋租赁的税收是多少，下面学习啦小编将在下文为你解答一下。一、房屋屋要交什么税房屋出租交纳的税费主要有以下几种情
小学生写作业，当适可而止。▲资料图：合肥市某小学，老师在指导学生。图 新华社文|翛然超时就停做！据现代快报报道，新学期开始，江苏常州一
在这金色的秋天，在这收获的季节，一年一度的教师节快来了，有人说老师是心灵中的一盏灯，是长途黑暗中的一线光明。下面是小编精心推荐的迎接
1、魔盒有副本查询仇恨伤害统计各种优化背包什么的我就不说了魔盒对于团队打副本的用处没有大脚多如果你是新手玩魔兽
2022年11月,以“共享RCEP新机遇共创建筑行业新未来”为主题的中国—东盟建筑业合作与发展论坛、2022中国—东盟建筑业暨高品质人居环境博览...
