CSS3实现的科技球体旋转动画特效

2019-09-10 郑州网站建设  

box-sizing: border-box;

border-radius: inherit;

border: 1px solid;

box-shadow: inset 0 0 2em, 0 0 2em;

}

.side::before {

width: 2.5em;

height: 2.5em;

color: gold;

}

.side::after {

width: 1.5em;

height: 1.5em;

-webkit-transform: translateZ(-2em);

transform: translateZ(-2em);

box-shadow: inset 0 0 1em, 0 0 1em;

color: teal;

}

.side--back {

-webkit-transform: translateZ(-5em) rotateY(180deg);

transform: translateZ(-5em) rotateY(180deg);

}

.side--left {

-webkit-transform: translateX(-5em) rotateY(-90deg);

transform: translateX(-5em) rotateY(-90deg);

}

.side--right {

-webkit-transform: translateX(5em) rotateY(90deg);

transform: translateX(5em) rotateY(90deg);

}

.side--top {

-webkit-transform: translateY(-5em) rotateX(90deg);

transform: translateY(-5em) rotateX(90deg);

}

.side--bottom {

-webkit-transform: translateY(5em) rotateX(-90deg);

transform: translateY(5em) rotateX(-90deg);

}

.side--front {

-webkit-transform: translateZ(5em);

transform: translateZ(5em);

}

.side__inner {

position: absolute;

left: 0;

right: 0;

bottom: 0;

top: 0;

width: 5em;

height: 5em;

margin: auto;

border-radius: inherit;

border: 1px solid;

box-shadow: inset 0 0 2em;

color: orangered;

-webkit-transform: translateZ(2em);

transform: translateZ(2em);

-webkit-transform-style: preserve-3d;

transform-style: preserve-3d;

}

.side__inner::before, .side__inner::after {

content: "";

display: block;

position: absolute;

left: 0;

right: 0;

bottom: 0;

top: 0;

margin: auto;

box-sizing: border-box;

border-radius: inherit;

border: 1px solid;

box-shadow: inset 0 0 2em, 0 0 2em;

}

.side__inner::before {

width: 2.5em;

height: 2.5em;

-webkit-transform: translateZ(2em);

transform: translateZ(2em);

color: crimson;

}

.side__inner::after {

width: 1.5em;

height: 1.5em;

-webkit-transform: translateZ(4em);

transform: translateZ(4em);

color: purple;

}

@-webkit-keyframes rotate {

100% {

-webkit-transform: rotateX(360deg) rotateY(720deg) rotateZ(360deg);

transform: rotateX(360deg) rotateY(720deg) rotateZ(360deg);

}

}

@keyframes rotate {

100% {

-webkit-transform: rotateX(360deg) rotateY(720deg) rotateZ(360deg);

transform: rotateX(360deg) rotateY(720deg) rotateZ(360deg);

}

}

HTML, BODY {

height: 100%;

}

BODY {

display: -webkit-box;

display: -ms-flexbox;

display: flex;

-webkit-box-pack: center;

-ms-flex-pack: center;

justify-content: center;

-webkit-box-align: center;

-ms-flex-align: center;

align-items: center;

}

</style>

</head>

<body>

<div class="container">

<div class="cube cube--1">

<div class="side side--back">

<div class="side__inner"></div>

</div>

<div class="side side--left">

<div class="side__inner"></div>

</div>

<div class="side side--right">

<div class="side__inner"></div>

</div>

<div class="side side--top">

<div class="side__inner"></div>

</div>

<div class="side side--bottom">

<div class="side__inner"></div>

</div>

<div class="side side--front">

<div class="side__inner"></div>

</div>

</div>

<div class="cube cube--2">

<div class="side side--back">

<div class="side__inner"></div>

</div>

<div class="side side--left">

<div class="side__inner"></div>

</div>

<div class="side side--right">

<div class="side__inner"></div>

</div>

<div class="side side--top">

<div class="side__inner"></div>

</div>

<div class="side side--bottom">

<div class="side__inner"></div>

</div>

<div class="side side--front">

<div class="side__inner"></div>

</div>

</div>

<div class="cube cube--3">

<div class="side side--back">

<div class="side__inner"></div>

</div>

<div class="side side--left">

<div class="side__inner"></div>

</div>

<div class="side side--right">

<div class="side__inner"></div>

</div>

<div class="side side--top">

<div class="side__inner"></div>

</div>

<div class="side side--bottom">

<div class="side__inner"></div>

</div>

<div class="side side--front">

<div class="side__inner"></div>

</div>

</div>

</div>

</body>

</html>

纯CSS3实现的科技球体旋转动画特效


河南郑州做网站首选天择文化,我们专注郑州网站建设网站设计网站制作与开发,是中原地区专业的郑州网络公司,多年来我们一直努力,服务客户数百家,欢迎您的咨询。
本文链接:郑州网络公司http://tzchb.ieyo.com/dede/1848.html转载请标明出处,谢谢合作!
标签:
  • Ч
  • CSS3
  • ;
  • position:
  • absolute
  • le