В этой статье я приведу пример создания вращающегося 3D куба с помощью HTML и CSS.
Нам понадобятся:
- 6 изображений одинакового размера (в моём примере 300px/300px), которые будут находиться в папке images.
- файл index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Вращающийся 3D-куб</title>
</head>
<body>
<p><a href="cube2.html">>>>Куб с закруглёнными углами</a></p>
<div class="wrapper">
<div class="cub">
<img class="size1"src="images/1.jpg" alt="">
<img class="size2"src="images/2.jpg" alt="">
<img class="size3"src="images/3.jpg" alt="">
<img class="size4"src="images/4.jpg" alt="">
<img class="size5"src="images/5.jpg" alt="">
<img class="size6"src="images/6.jpg" alt="">
</div>
</div>
</body>
</html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Вращающийся 3D-куб</title>
</head>
<body>
<p><a href="cube2.html">>>>Куб с закруглёнными углами</a></p>
<div class="wrapper">
<div class="cub">
<img class="size1"src="images/1.jpg" alt="">
<img class="size2"src="images/2.jpg" alt="">
<img class="size3"src="images/3.jpg" alt="">
<img class="size4"src="images/4.jpg" alt="">
<img class="size5"src="images/5.jpg" alt="">
<img class="size6"src="images/6.jpg" alt="">
</div>
</div>
</body>
</html>
- файл style. css
html {
background:#032756;
}
.wrapper {
margin-top: 150px;
perspective: 1000px;
}
.cub {
position: relative;
margin: auto;
height: 300px;
width: 300px;
transform-style: preserve-3d;
animation: rotate 15s infinite linear;
}
img {
position: absolute;
height: 100%;
width: 100%;
border: solid 1px #90b7eb;
}
.size1 {
transform: translateZ(150px);
}
.size2 {
transform: translateZ(-150px) rotateY(180deg);
}
.size3 {
transform: rotateY(-270deg) translateX(150px);
transform-origin: top right;
}
.size4 {
transform: rotateY(270deg) translateX(-150px);
transform-origin: center left;
}
.size5 {
transform: rotateX(-270deg) translateY(-150px);
transform-origin: top center;
}
.size6 {
transform: rotateX(270deg) translateY(150px);
transform-origin: bottom center;
}
@keyframes rotate {
from {
transform: rotateX(0deg) rotateY(0deg);
}
to {
transform: rotateX(360deg) rotateY(360deg);
}
}
p {
text-align: center;
font-size: 30px;
}
a {
color: #fff;
}
background:#032756;
}
.wrapper {
margin-top: 150px;
perspective: 1000px;
}
.cub {
position: relative;
margin: auto;
height: 300px;
width: 300px;
transform-style: preserve-3d;
animation: rotate 15s infinite linear;
}
img {
position: absolute;
height: 100%;
width: 100%;
border: solid 1px #90b7eb;
}
.size1 {
transform: translateZ(150px);
}
.size2 {
transform: translateZ(-150px) rotateY(180deg);
}
.size3 {
transform: rotateY(-270deg) translateX(150px);
transform-origin: top right;
}
.size4 {
transform: rotateY(270deg) translateX(-150px);
transform-origin: center left;
}
.size5 {
transform: rotateX(-270deg) translateY(-150px);
transform-origin: top center;
}
.size6 {
transform: rotateX(270deg) translateY(150px);
transform-origin: bottom center;
}
@keyframes rotate {
from {
transform: rotateX(0deg) rotateY(0deg);
}
to {
transform: rotateX(360deg) rotateY(360deg);
}
}
p {
text-align: center;
font-size: 30px;
}
a {
color: #fff;
}
Если селектору img добавить свойство border-radius, то получится вот такой интересный эффект: