1949啦网--小小 痛苦,是因为能力和欲望不匹配造成的

CSS3好看的3D切换效果

本文实现好看的3D翻转效果。目前为止,现代浏览器基本都支持无前缀的3D变换的相关属性(除了IE,以及Safari9的backface-visibility仍需加前缀-webkit)

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 type="text/css">  *{  	margin: 0;  	padding: 0;  }  .wrap{    padding: 50px;  }  .stage{  	width: 100px;  	height: 100px;  	-webkit-perspective: 2000px;  	perspective: 2000px;  	list-style: none;  }  .container{   	position: relative;   	width: 100px;  	height: 100px;  	-webkit-transform-style: preserve-3d;  	transform-style: preserve-3d;  	-webkit-transition: 1s;  	transition: 1s;  }  .front{  	position: absolute;  	width: 100px;  	height: 100px;  	-webkit-transform: translateZ(50px);  	transform: translateZ(50px);  	-webkit-backface-visibility: hidden;  	backface-visibility: hidden;  }  .front img{  	width: 100%;  	height: 100%;  }  .back{  	position: absolute;  	display: block;  	width: 100px;  	height: 100px;  	text-align: center;  	line-height: 100px;  	-webkit-transform: rotateY(90deg) translateZ(50px);  	transform: rotateY(90deg) translateZ(50px);  	-webkit-backface-visibility: hidden;  	backface-visibility: hidden;  	overflow: hidden;  }  li:nth-child(1) .back{  	background-color: skyblue;  }  li:nth-child(2) .back{  	background-color: pink;  }  li:nth-child(3) .back{  	background-color: lightyellow;  }  .container:hover{  	-webkit-transform: rotateY(-90deg);  	transform: rotateY(-90deg);  }    		</style>        </head>      <body>  	<ul class="wrap">  		<li class="stage">  			<div class='container'>  				<div class="front"><img src="https://www.qiquanji.com/data/img/dmj/201904141555212147207362.jpg" /></div>  				<p class="back">购物网图片放大镜JS效果实现</p>  			</div>  		</li>  		<li class="stage">  			<div class='container'>  				<div class="front"><img src="https://www.qiquanji.com/data/img/dmj/201904051554472585115749.jpg" /></div>  				<p class="back">jquery鼠标移入图片左滑动效果</p>  			</div>  		</li>  		<li class="stage">  			<div class='container'>  				<div class="front"><img src="https://www.qiquanji.com/data/img/dmj/201904151555302585132363.jpg" /></div>  				<p class="back">JS漂浮广告实现代码(全屏)</p>  			</div>  		</li>  	</ul>  </body>    </html>

原文链接:https://www.qiquanji.com/post/7092.html

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

微信扫码关注

更新实时通知

作者:xialibing 分类:网页教程 浏览: