CSS3简单特效

2024-07-17 02:19| 来源: 网络整理| 查看: 265

CSS3简单特效–transform实现翻书效果

上一篇介绍了animation如何实现流光按钮效果，现给大家介绍一下如何利用css3的transform属性实现鼠标停留实现翻书的效果，下图是鼠标停在div上，“书页”翻动后的效果。在这里插入图片描述可以看出这有一种3D的效果，css3中让元素变成3D空间元素，通常来说分为以下三步： 1、父级中加入视距：perspective:800px; 2、在需要显示3D效果的元素加上一个3D层：transform-style:preserve-3d; 3、设置观看视角：perspective-origin:center center;（这个值不设置的话默认为center）。 3D场景设置好后，每一个书页为一个矩形，黄色的虚线边框利用ul标签套五个li。要实现li沿左边距旋转，需使用css3中transform属性，下面给大家介绍一下在使用transform属性时常用值~ 设置旋转中心属性：transform-origin:x轴点 y轴点;（可以设置像素值也可以设置center、left等）。设置旋转方式：transform:rotate();（围绕X轴旋转为rotateX(),Y、Z轴同理，括号中填旋转的角度deg）。给父级设置3d层主要代码如下

body{ background-color: black; perspective: 800px; } ul{ position: relative; width: 200px; height: 300px; box-shadow: 0px 0px 5px 1px gold; margin: 200px auto; transform-style: preserve-3d; } ul li{ position: absolute; border: 1px dashed gold; width: 200px; height: 300px; transform-origin:0px center; }

一般3D层给实现3D效果的父盒子，视距给最大的盒子body。在给子元素设置旋转角度过程中，使用伪类选择器可以减少内存的占用，这里使用到:nth-child()伪类。主要css代码如下：

ul:hover li:nth-child(1){ transform:rotateY(-180deg); } ul:hover li:nth-child(2){ transform:rotateY(-160deg); } ul:hover li:nth-child(3){ transform:rotateY(-150deg); } ul:hover li:nth-child(4){ transform:rotateY(-140deg); } ul:hover li:nth-child(5){ transform:rotateY(-130deg); }

最后为了实现书页每页翻动时有延时间隔，使用过度属性transition实现过度动画效果。（transition:transition-property(过度属性) transition-duration(过度时间) transition-timing-function(动画类型) transition-delay(延时时间)，例如transition:all 2s linear .5s;的意思是所有元素动画延时0.5秒以线性效果2秒完成）完整代码如下：

Document *{ margin: 0px; padding: 0px; list-style: none; } body{ background-color: black; perspective: 800px; } ul{ position: relative; width: 200px; height: 300px; box-shadow: 0px 0px 5px 1px gold; margin: 200px auto; transform-style: preserve-3d; } ul li{ position: absolute; border: 1px dashed gold; width: 200px; height: 300px; transform-origin:0px center; /* background-color: white; */ } ul:hover{ transform:rotateX(30deg); transition:all 2s; } ul:hover li:nth-child(1){ transform:rotateY(-180deg); transition:all 2s .5s; } ul:hover li:nth-child(2){ transform:rotateY(-160deg); transition:all 2s .8s; } ul:hover li:nth-child(3){ transform:rotateY(-150deg); transition:all 2s 1s; } ul:hover li:nth-child(4){ transform:rotateY(-140deg); transition:all 2s 1.2s; } ul:hover li:nth-child(5){ transform:rotateY(-130deg); transition:all 2s 1.4s; }

简单的css3翻书动画效果就实现啦，对你有帮助的话点个赞支持下哦~ 在这里插入图片描述

【本文地址】

公司简介

联系我们