web前端——旋转3D魔方

前端css实现3D魔方,先看一下效果图:

盒子布局

将3D魔方的6个面包裹在一个父盒子中

<div class="content">
  <div class="parent">
    <div class="div1">div>
    <div class="div2">div>
    <div class="div3">div>
    <div class="div4">div>
    <div class="div5">div>
    <div class="div6">div>
  div>
div>

添加3D效果

  1. 给父盒子添加相对定位和3D属性
.parent {
/* 相对定位 */
	position: relative;
	width: 400px;
	height: 400px;
	margin: 200px auto;
	/* 3D属性 */
	transform-style: preserve-3d;
	/* 旋转动画 */
	animation-name: rotate;
	animation-duration: 10s;
	animation-iteration-count: infinite;
}
  1. 给子盒子添加绝对定位,并移动、旋转子盒子
.parent>div {
	position: absolute;
	width: 400px;
	height: 400px;
	border: 1px solid pink;
	font-size: 40px;
	line-height: 400px;
	text-align: center;
}

.div1 {
	top: -50%;
	color: yellow;
	transform: rotateX(90deg);
}

.div2 {
	top: 50%;
	color: white;
	transform: rotateX(90deg);
}

.div3 {
	left: -50%;
	color: red;
	transform: rotateY(90deg);
}

.div4 {
	left: 50%;
	color: orange;
	transform: rotateY(90deg);
}

.div5 {
	transform: translateZ(200px);
	color: blue;
}

.div6 {
	transform: translateZ(-200px);
	color: green;
}

效果:
web前端——旋转3D魔方_第1张图片

  1. 给父盒子添加动画效果
.parent {
	/* 相对定位 */
	position: relative;
	width: 400px;
	height: 400px;
	margin: 200px auto;
	/* 3D属性 */
	transform-style: preserve-3d;
	/* 旋转动画 */
	animation-name: rotate;
	animation-duration: 10s;
	animation-iteration-count: infinite;
}

@keyframes rotate {
	0% {
		transform: rotateX(0) rotateY(0)
	}

	100% {
		transform: rotateX(360deg) rotateY(360deg)
	}
}

整体代码


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>旋转盒子title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: black;
        }

        .parent {
            position: relative;
            width: 400px;
            height: 400px;
            background-color: violet;
            margin: auto;
            margin-top: 250px;
            transform-style: preserve-3d;
            animation-name: xuanzhuan;
            animation-duration: 10s;
            animation-iteration-count: infinite;
        }

        .parent>div {
            position: absolute;
            width: 400px;
            height: 400px;
            border: 1px solid pink;
            /* background-image: repeating-linear-gradient(pink 0,pink 1px, transparent 2px,transparent 47px),
            repeating-linear-gradient(to right ,pink 0,pink 1px, transparent 2px,transparent 47px); */
        }

        .div1 {
            color: violet;
            right: 200px;
            transform: rotateY(90deg);
        }

        .div2 {
            color: yellow;
            top: -200px;
            transform: rotateX(90deg);
        }

        .div3 {
            color: wheat;
            right: -200px;
            transform: rotateY(90deg);
        }

        .div4 {
            color: springgreen;
            bottom: -200px;
            transform: rotateX(90deg);
        }

        .div5 {
            color: steelblue;
            transform: translateZ(-200px);
        }

        .div6 {
            color: slategray;
            transform: translateZ(200px);
        }

        @keyframes xuanzhuan {
            0%{
                transform: rotateX(0) rotateY(0);
            }

            100%{
                transform: rotateX(360deg) rotateY(360deg);
            }
        }
    style>
head>
<body>
    <div class="parent">
        <div class="div1">div>
        <div class="div2">div>
        <div class="div3">div>
        <div class="div4">div>
        <div class="div5">div>
        <div class="div6">div>
    div>
body>
html>

你可能感兴趣的:(web前端)