如视频的正方体
旋转正方体
css3实现这个正方体需要用到transform样式以及animation样式
具体结构:
<body>
<div class="father">
<div class="one">
<img src="D:/wallpaper/2020 五月/11_4k.jpg">
</div>
<div class="two">
<img src="D:/wallpaper/2020 五月/12_4k.jpg">
</div>
<div class="three">
<img src="D:/wallpaper/2020 五月/13_4k.jpg">
</div>
<div class="four">
<img src="D:/wallpaper/2020 五月/14_4k.jpg">
</div>
<div class="five">
<img src="D:/wallpaper/2020 五月/16_4k.jpg">
</div>
<div class="six">
<img src="D:/wallpaper/2020 五月/17_4k.jpg">
</div>
</div>
</body>
具体思路:正方体有六个面,给一个父盒子,父盒子里给六个子盒子作为六个面,利用transform样式把六个面排成正方体,最后使用动画旋转父盒子即可。
父盒子样式:
<style>
* {
margin: 0;
padding: 0;
}
body{
perspective: 2000px;//给父盒子的父元素即body标签透视效果
}
.father {
position: relative;
width: 400px;
height: 400px;
margin: 200px auto;
transform-style: preserve-3d;//使子元素以3D效果显示
animation: fast 10s ease-in-out infinite;
}
</style>
子盒子样式:
<style>
//给子盒子公有样式,使用定位将子盒子定位在一起
.father div {
position: absolute;
width: 400px;
height: 400px;
padding:31px;
background-image: linear-gradient(to right,#00aaf7,#6dcedf);
}
.father div img {
width: 400px;
height: 400px;
}
/*
使用transform :translateZ将子盒子沿z轴平移一段距离后使用rotateX和rotateY将子盒子绕
xy轴旋转成正方体的样子
*/
.father .one {
transform: rotateY(0deg) ;
}
.father .two {
transform: rotateY(90deg) translateZ(231px);
}
.father .three {
transform: rotateY(180deg) translateZ(231px);
}
.father .four {
transform: rotateY(270deg) translateZ(231px);
}
.father .five {
transform: rotateX(90deg) translateZ(231px);
}
.father .six {
transform: rotateX(-90deg) translateZ(231px);
}
</style>
最后父盒子调用动画即可:animation: fast 10s ease-in-out infinite;
动画样式:
<style>
/* 定义动画 */
@keyframes fast {
0%{
transform: rotateX(0deg) rotateY(0deg);
}
100% {
transform: rotateX(360deg) rotateY(360deg);
}
}
</style>