CSS3三维旋转模拟书本翻页效果

最新推荐文章于 2023-04-11 19:35:13 发布

一粒马豆

最新推荐文章于 2023-04-11 19:35:13 发布

阅读量3.2k

点赞数 1

文章标签： css3 html5 transform rotate 书籍翻页效果

本文链接：https://blog.csdn.net/MAILLIBIN/article/details/51510506

版权

通过CSS3的transform属性，特别是rotateY()函数，可以创建逼真的三维书本翻页效果，为网页增添互动体验。

摘要由CSDN通过智能技术生成

CSS3三维旋转模拟书本翻页效果

其实主要就是应用transform:rotateY()

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3三维旋转模拟书本翻页效果</title>
<meta name="description" content="CSS3三维旋转模拟书本翻页效果">
</head>
<style>

@keyframes rotate-frame{
	0%{transform: rotateY(0deg);}
	50%{transform:rotateY(-180deg);}
	100%{transform:rotateY(0deg);}
}

body{
	background:gray;
	color:white;
	text-align:center;
}

.book{
	position:absolute;
	margin-top:200px;
	margin-left:500px;
}

.page{
	position:absolute;
	perspective:800px; /*perpective属性非常重要，缺少这个属性就没有透视效果了！*/
	width:200px;
	height:300px;
	background:white;
	box-shadow:0px 0px 200px #333333;
}

.cover,.booktitle{
	position:absolute;
	width:200px;
	height:300px;
	background:red;
	transform-origin:0px 0px 0px; /*ransform-origin属性表示变形发起原点，设置错误会效果混乱！*/

最低0.47元/天解锁文章

一粒马豆

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
CSS3三维旋转模拟书本翻页效果

CSS3三维旋转模拟书本翻页效果其实主要就是应用transform:rotateY()CSS3三维旋转模拟书本翻页效果@keyframes rotate-frame{ 0%{transform: rotateY(0deg);} 50%{transform:rotateY(-180deg);} 100%{transform:rotateY(0d
复制链接

扫一扫