css3 3D转换实现书本翻页效果

最新推荐文章于 2022-08-10 17:15:46 发布

半眸子

最新推荐文章于 2022-08-10 17:15:46 发布

阅读量426

点赞数

分类专栏：前端文章标签： html css3

本文链接：https://blog.csdn.net/qq_31888873/article/details/115269069

版权

这篇博客介绍了一种简单易懂的CSS3 3D转换方法，用于创建书本翻页效果。作者强调了理解3D转换属性的重要性，并提供了一段带有注释的代码示例，帮助初学者避免常见误区。

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

最简单的翻页效果实现。之前找了别人做好的代码看了一下，但是有点小复杂，虽然效果很好看，但是可能一开始看不太懂，所以做了个最简易版的。

简单易懂，css里面的注释的地方是我自己一开始走的弯路，所以建议看之前最好要先仔细学习下3D转换的各个属性。

直接上代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.box {
				width: 200px;
				height: 200px;
				/* 这里不可以设置transform-style，且必须设置perspective */
				/* -webkit-transform-style: preserve-3d;
				transform-style: preserve-3d; */
				/* 可3D转换的元素的父元素设置该属性，否则视角有问题 */
				-webkit-perspective: 1800px;
				perspective: 1800px;
			}

			input {
				display: none;
			}

			.pages {
				position: absolute;
				right: 0;
				width: 100px;
				height: 200px;
				text-align: center;
				line-height: 200px;
				color: #FFFFFF;
				transform-origin: 0 50%;
				/* 可3D转换的元素（不是父元素）必须设置这个，否则显示会有问题 */
				-webkit-transform-style: preserve

最低0.47元/天解锁文章

半眸子

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
css3 3D转换实现书本翻页效果

最简单的翻页效果实现。之前找了别人做好的代码看了一下，但是有点小复杂，虽然效果很好看，但是可能一开始看不太懂，所以做了个最简易版的。简单易懂，css里面的注释的地方是我自己一开始走的弯路，所以建议看之前最好要先仔细学习下3D转换的各个属性。直接上代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="
复制链接

扫一扫