期权记-ETF期权开户导航 期权记是专业的50ETF300ETF期权开户投资交易导航

Css3实现3D切换翻转效果

CSS3的3D效果很赞,本文实现简单的两种3D翻转效果。首先看效果和源代码,文末是文绉绉的总结部分

CSS3变换主要的属性如下:

(1)perspective(参考以上类名stage中的使用)

  用法:应用于舞台元素,为元素定义perspective属性时,其子元素会获得透视效果。

  作用:定义3D 元素距视图的距离(视距),单位是像素。可以理解为距物体多远进行观察,因此这个值越小,距离元素物体更近,3D效果越明显;该值越大,距离元素物体越远,3D效果越不明显,因为远远看的只见一坨东西。

  注意:在实际应用中,可以通过设置多个舞台元素,使子元素的变换相对于各自的舞台实现,那么每一个舞台下的元素变换所产生的视觉效果都是一致的(参考我上面的第二个例子)。

(2)perspective-origin(参考以上类名stage中的使用)

  用法:应用于舞台元素,与perspective配合使用,子元素会获得透视效果

  作用:可以理解为眼睛所看的位置,默认舞台中心点

  注意:几种设置方法,如

    perspective-origin: 0px 100px; (使用具体数值)

    perspective-origin: 0% 50%;  (使用百分比)

    perspective-origin: left center;  (共3种: left/center/right)

(3)transform-style: preserve-3d(参考以上类名container中的使用)

  用法:用于动画子元素的父元素,也就是容器

  作用:具有两个作用,首先使子元素具有透视效果,其次使子元素保留父元素的3D位置。

  注意:这个属性究竟有什么用?和perspective有什么干系?

     ——该属性是为了嵌套3D元素而使用的!perspective和transform-style各自使得子元素具有3D透视效果,并且transform-style:preserve-3d使子元素保留父元素的3D位置,简单来说就是嵌套。如果不需要嵌套3D元素,就不需要这个属性。看下面的例子:

<!DOCTYPE html>  <html>  	<head>  		<meta charset="UTF-8">  		<title></title>  		  <style>    	.qiquanji{    		width: 120px;    		height: 35px;    		margin: 0 auto;    	}         #sd{             width: 120px;             height: 35px;             background-color: darkcyan;             text-align: center;             line-height: 35px;             position: relative;             transform-style: preserve-3d;             transition: all 0.3s linear;         }         #sd:hover{             transform: rotateX(90deg);             transition: all 0.3s linear;             -webkit-transform-origin: 50% 0;         }         #sd:before{             position: absolute;             top: 100%;             left: 0;             content: attr(data-hover);             width: 120px;             height: 35px;             transform: rotateX(-90deg);             transition: all 0.3s linear;             transform-origin: 50% 0;             text-align: center;             line-height: 35px;              background-color: darkkhaki;         }      </style>     <div class="qiquanji">      <div id="sd" data-hover="实现3D切换效果">          <p>实现3D切换效果</p>      </div>  </div>  </body>  </html>

效果点上面的(运行代码)来看

用一个GIF做一个大概效果图片:

本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。

微信扫码关注

更新实时通知

作者:期权小韭菜 分类:网页教程 浏览:
请先 登录 再评论,若不是会员请先 注册