css实现旋转魔方相册

最新推荐文章于 2022-08-02 19:19:00 发布

夜凉人着衣

最新推荐文章于 2022-08-02 19:19:00 发布

阅读量3.3k

点赞数 2

本文链接：https://blog.youkuaiyun.com/weixin_44819032/article/details/99242958

版权

来源`https://segmentfault.com/a/1190000011838500

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="referrer" content="never">
<style>
	*{
	    padding:0;
	    margin:0;
	}
	body{
	    width:100%;
	    height:100%;
	    background:linear-gradient(yellow 0%,black 100%);
		background-image: url(photo/13.jpg);
	}
	#react{
	    width: 200px;
	    height:200px;
	    margin: 200px auto;
	    transform-style:preserve-3d;
	    animation:rotate 20s infinite;
	    animation-timing-function: linear;
	}
	#react div{
	    position:absolute;
	    transition: all .4s;
	}
	div .out_pic{
	    width:200px;
	    height:200px;
	    opacity:0.9;
	}
	div .in_pic{
	    width:100px;
	    height:100px;
	}
	#react span{
	    display:block;
	    position:absolute;
	    width:100px;
	    height:100px;
	    top:50px;
	    left:50px;
	}
	@keyframes rotate{
	    from{transform: rotateX(0deg) rotateY(0deg);}