css3常用属性之动画示例实现3D立方体旋转特效

最新推荐文章于 2021-08-04 00:10:51 发布

weixin_30872789

最新推荐文章于 2021-08-04 00:10:51 发布

阅读量177

点赞数

原文链接：http://www.cnblogs.com/bhmmlxieliming/p/6527290.html

版权

参考博客周全http://www.cnblogs.com/jc535201285/p/6519693.html

参考网址：http://www.w3cschool.cn/css3/rvwu5flo.html

主页代码：

<body>

<div class="rect-wrap">   <!--舞台元素，设置perspective，让其子元素获得透视效果。-->
    <div class="container">   <!-- 容器，设置transform-style: preserve-3d，让其子元素在3D空间呈现-->
        <div class="top slide"> <img  class="tu" src="images/1.jpg"/></div>   <!--立方体的六个面-->
        <div class="bottom slide"><img  class="tu" src="images/2.jpg"/></div>
        <div class="left slide"><img  class="tu" src="images/3.jpg"/></div>
        <div class="right slide"><img  class="tu" src="images/6.jpg"/></div>
        <div class="front slide"><img  class="tu" src="images/10.jpg"/></div>
        <div class="back slide"><img  class="tu" src="images/7.jpg"/></div>
    </div>
</div>
</body>

　　样式表：

<style type="text/css">
.rect-wrap {
    position: relative;
    perspective: 1600px;
}
.container {
    width: 800px;
    height: 800px;
    transform-style: preserve-3d;
    transform-origin: 50% 50% 200px;    /*设置3d空间的原点在平面中心再向Z轴移动200px的位置*/
}
.slide {
    width: 400px;
    height: 400px;
    position: absolute;  //定位
}
.top {
    left: 200px;
    top: -200px;
    transform: rotateX(-90deg);
    transform-origin: bottom;
    background-color:#FF9;
}
.bottom {
    left: 200px;
    bottom: -200px;
    transform: rotateX(90deg);
    transform-origin: top;
    background-color:#6FF;
}
.left {
    left: -200px;
    top: 200px;
    transform: rotateY(90deg);
    transform-origin: right;
    background-color:#9F6;
}
.right {
    left: 600px;
    top: 200px;
    transform: rotateY(-90deg);
    transform-origin: left;
    background-color:#33F;
	
}
.front {
    left: 200px;
    top: 200px;
    transform: translateZ(400px);
    background-color:#96C; /*立方体前面正对着屏幕，所以不用旋转，只需向Z轴前移动距离*/
     
}
.back {
    left: 200px;
    top: 200px;
    transform: translateZ(0);
    background-color:#69F;  /*立方体后面正对着屏幕，所以不用旋转，只需向Z轴后移动距离*/
}
@keyframes rotate-frame {
    0% {
        transform: rotateX(0deg) rotateY(0deg);
    }
    10% {
        transform: rotateX(0deg) rotateY(180deg);
    }
    20% {
        transform: rotateX(-180deg) rotateY(180deg);
    }
    30% {
        transform: rotateX(-360deg) rotateY(180deg);
    }
    40% {
        transform: rotateX(-360deg) rotateY(360deg);
    }
    50% {
        transform: rotateX(-180deg) rotateY(360deg);
    }
    60% {
        transform: rotateX(90deg) rotateY(180deg);
    }
    70% {
        transform: rotateX(0) rotateY(180deg);
    }
    80% {
        transform: rotateX(90deg) rotateY(90deg);
    }
    90% {
        transform: rotateX(90deg) rotateY(0);
    }
    100% {
        transform: rotateX(0) rotateY(0);
    }
}
.container{
    animation: rotate-frame 30s linear infinite;
}

.tu{
	width:400px;
	height:400px;
	
	}

</style>

　　效果图示：

转载于:https://www.cnblogs.com/bhmmlxieliming/p/6527290.html

weixin_30872789

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css3常用属性之动画示例实现3D立方体旋转特效

参考博客周全http://www.cnblogs.com/jc535201285/p/6519693.html参考网址：http://www.w3cschool.cn/css3/rvwu5flo.html主页代码：<body><div class="rect-wrap"> <!--舞台元素，设置perspective，让其子元素...
复制链接

扫一扫