html css 魔方,css3实现立体魔方效果

css3魔方

div.box {

width: 300px;

height: 300px;

margin: 100px auto;

position: relative;

transform-style: preserve-3d;

animation: rotate 5s linear infinite alternate;

}

div.box:hover{

animation-play-state: paused;

}

@keyframes rotate{

0%{

transform: rotateX(0) rotateY(0) rotateZ(0);

}

50%{

transform: rotateX(30deg) rotateY(34deg) rotateZ(50deg);

}

100%{

transform: rotateX(60deg) rotateY(90deg) rotateZ(135deg);

}

div.face {

width: 300px;

height: 300px;

position: absolute;

display: flex;

flex-wrap: wrap;

justify-content: space-between;

align-content: space-between;

}

div.item {

width: 90px;

height: 90px;

border-radius: 10px;

text-align: center;

line-height: 90px;

}

.top .item {

background: red;

}

.top {

transform: rotateX(-90deg) translateZ(150px);

}

.bottom .item {

background: skyblue;

}

.bottom {

transform: rotateX(90deg) translateZ(150px);

}

.left .item {

background: chocolate;

}

.left {

transform: rotateY(90deg) translateZ(150px);

}

.right .item {

background: blue;

}

.right {

transform: rotateY(-90deg) translateZ(150px);

}

.front .item {

background: deepskyblue;

}

.front {

transform: translateZ(150px)

}

.back .item {

background: yellowgreen;

}

.back {

transform: translateZ(-150px) rotateY(-180deg);

}

html css 魔方,css3实现立体魔方效果相关推荐

[css] 用css3画出一个立体魔方
[css] 用css3画出一个立体魔方 <!DOCTYPE html> <html> <head><meta charset="utf-8" ...
[css] 使用css3做一个魔方旋转的效果
[css] 使用css3做一个魔方旋转的效果总的来说,用了一些 3D 效果的样式,如 translate3d,rotate3d,perspective,transform-style: preser ...
和css3实例教程_最好CSS和CSS3教程
和css3实例教程级联样式表(CSS) (Cascading Style Sheets (CSS)) CSS is an acronym for Cascading Style Sheets. It ...
[css] 使用css3画一个扇形
[css] 使用css3画一个扇形四个半圆叠加,过半调整 z-index .container { width: 200px; height: 200px; position: relative; ...
[css] 使用css3实现一个斑马线的效果
[css] 使用css3实现一个斑马线的效果 @ferrinweb 如果需要很多或者无限扩展的斑马线,你这个方案就有缺点了 @cxwht 你的方案需要增加额外的元素,不太理想最好的办法是用渐变背景实 ...
[css] 用css3实现文字发光的效果
[css] 用css3实现文字发光的效果 <!DOCTYPE html> <html lang="en"><head><meta char ...
[css] 用css3实现伪3D的文字效果
[css] 用css3实现伪3D的文字效果 <!DOCTYPE html> <html lang="en"><head><meta cha ...
css3魔方3乘3每层旋转_学习做旋转魔方 (css3)
学习做旋转魔方 (css3) 看到一个帖子做了一个旋转魔方, 想着试着学习练练手. 看着高手的代码按照自己的思路, 码了一下, 记下遇到的一些问题. html 代码片段 3D 魔方 Rubik's C ...
CSS 3.0实现立体书本特效
给大家分享一个运用CSS 3.0实现的立体书本特效,效果如下: 还真是很像一本书吧,但是需要下面三张图片配合. 1.书的正面图(1.jpg),实际尺寸以代码中的为准. 2.书的侧面(2.jpg),实际 ...

html css 魔方,css3实现立体魔方效果

html css 魔方,css3实现立体魔方效果相关推荐

最新文章

热门文章