css3 立方体旋转效果

最新推荐文章于 2023-01-05 09:56:27 发布

可乐188小窝

最新推荐文章于 2023-01-05 09:56:27 发布

阅读量160

点赞数

本文链接：https://blog.csdn.net/u011638241/article/details/117472413

版权

效果1：

<!DOCTYPE html>
<html>
<head>
<meta name="description" content="css3实现的3D旋转立方体盒子">
<meta charset="utf-8">
<title>旋转立方体</title>
<style type="text/css">
.stage{
position: relative;
perspective: 800px;
   margin:248px 140px 128px 130px;
}
/*设置图像大小、边框、圆角、位置*/
.container img{
width: 144px;
height: 140px;
border: 5px solid #ccc;
border-radius: 5px;
position: absolute;
left: 0;
top: 0;
}

@keyframes rotate-frame{
0% {
transform: rotateX(0deg);
}
25% {
transform: rotateX(180deg);
}
50% {
transform: rotateX(360deg) rotateY(0deg);
}
75% {
transform: rotateX(360deg) rotateY(180deg);
}
100% {
transform: rotateX(360deg) rotateY(360deg);
}
}
.container{
width: 450px;
height: 450px;
transform-style:preserve-3d;
animation: rotate-frame 8s infinite linear;
transform-origin: 50% 50% 75px;
/*background: yellow; 容器屏幕背景色*/
}
.side{
width: 150px;
height: 150px;
position: absolute;
   opacity:0.8;
box-shadow: inset 0 0 20px rgba(0,0,0,0.9);
text-align: center;
line-height: 150px;
}
.top{
left: 150px;
top: 0;
transform: rotateX(-90deg);
transform-origin: bottom;
}
.bottom{
left: 150px;
top: 300px;
transform: rotateX(90deg);
transform-origin: top;
}
.left{
left: 0;
top: 150px;
transform: rotateY(90deg);
transform-origin: right;
}
.right{
left: 300px;
top: 150px;
transform: rotateY(-90deg);
transform-origin: left;
}
.front{
left: 150px;
top: 150px;
transform: translateZ(150px);
}
.back{
left: 150px;
top: 150px;
}
</style>
</head>
<body>
<div class="stage">
<div class="container">
<div class="side top"> <img src="image/1.jpg"></div>
<div class="side bottom"> <img src="image/2.jpg"></div>
<div class="side left"> <img src="image/3.jpg"></div>
<div class="side right"> <img src="image/4.jpg"></div>
<div class="side front"> <img src="image/8.jpg"></div>
<div class="side back"> <img src="image/11.jpg"></div>
</div>
</div>
</body>
</html>

效果2：

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>3D旋转</title>
<style>
*{
padding: 0;
margin: 0;
}

/*背景设置为黑色*/
body{
background:#000;
}

/*设置相册盒子大小、位置、外边框、旋转参数*/
#photo_box{
width: 280px;
height: 400px;
position: fixed;
left: 0;
right: 0;
top:0;
bottom: 0;
margin: 200px auto;
transform-style: preserve-3d;/*表示所有子元素在3D空间中呈现*/
transform: rotateX(-5deg) rotateY(0deg);
animation: run 30s linear infinite;/*循环执行run动画，每30秒执行一次*/
}

/*设置图像大小、边框、圆角、位置*/
#photo_box img{
width: 250px;
height: 350px;
border: 5px solid #ccc;
border-radius: 5px;
position: absolute;
left: 0;
top: 0;
}

/*依次设置图像盒子中每个图像旋转后位置*/
#photo_box img:nth-child(1){
transform: rotateY(0deg) translateZ(500px);
}
#photo_box img:nth-child(2){
transform: rotateY(36deg) translateZ(500px);
}
#photo_box img:nth-child(3){
transform: rotateY(72deg) translateZ(500px);
}
#photo_box img:nth-child(4){
transform: rotateY(108deg) translateZ(500px);
}
#photo_box img:nth-child(5){
transform: rotateY(144deg) translateZ(500px);
}
#photo_box img:nth-child(6){
transform: rotateY(180deg) translateZ(500px);
}
#photo_box img:nth-child(7){
transform: rotateY(216deg) translateZ(500px);
}
#photo_box img:nth-child(8){
transform: rotateY(252deg) translateZ(500px);
}
#photo_box img:nth-child(9){
transform: rotateY(288deg) translateZ(500px);
}
#photo_box img:nth-child(10){
transform: rotateY(324deg) translateZ(500px);
}
#photo_box img:nth-child(11){
transform: rotateY(360deg) translateZ(500px);
}

/*采用@keyframes 规则创建run动画。*/
@keyframes run {
0%{transform: rotateX(0deg) rotateY(0deg);
}
25%{transform: rotateX(10deg) rotateY(90deg);
}
50%{transform: rotateX(0deg) rotateY(180deg);
}
75%{transform: rotateX(-10deg) rotateY(270deg);
}
100%{transform: rotateX(0deg) rotateY(360deg);
}
}
</style>

</head>
<body>
<div id="photo_box">
<img src="image/1.jpg">
<img src="image/2.jpg">
<img src="image/3.jpg">
<img src="image/4.jpg">
<img src="image/5.jpg">
<img src="image/6.jpg">
<img src="image/7.jpg">
<img src="image/8.jpg">
<img src="image/9.jpg">
   <img src="image/10.jpg">
   <img src="image/11.jpg">

</div>
</body>
</html>

可乐188小窝

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css3 立方体旋转效果

<!DOCTYPE html><html><head><meta name="description" content="css3实现的3D旋转立方体盒子"> <meta charset="utf-8"> <title>旋转立方体</title> <style type="text/css"> .stage{ position: relative; perspective:...
复制链接

扫一扫