html 制作魔方源代码,CSS3 3d环境实现立体魔方效果代码

魔方

section{width: 100px;height:100px;border:5px solid red; margin:50px auto;padding:100px;perspective: 800px;}

.box {width:100px;height:100px;position:relative;

transform-style:preserve-3d;

transition:4S;

transform-origin:center center -50px;

}

.box div{width: 100px;height:100px;position:absolute;color:white;font-size:50px;text-align: center;line-height:100px;}

.box div:nth-of-type(1){

background: #FF6600;;

transform:translateX(-100px) rotateY(-90deg);

transform-origin:right;

}

.box div:nth-of-type(2){

background:red ;

transform:translateY(-100px) rotateX(90deg);

transform-origin:bottom ;

}

.box div:nth-of-type(3){

background:darkviolet;

transform:translateX(100px) rotateY(90deg);

transform-origin:left;

}

.box div:nth-of-type(4){

background:yellow;

transform: translateY(100px) rotateX(-90deg) ;

transform-origin:top;

}

.box div:nth-of-type(5){

background:green;

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

}

.box div:nth-of-type(6){

background:blue;

}

section:hover .box{

transform: rotateX(270deg) rotateY(-270deg) rotateX(-270deg) rotateY(270deg) ;

}

html 制作魔方源代码,CSS3 3d环境实现立体魔方效果代码相关推荐

css 3d魔方源代码,CSS3 3D环境实现立体魔方效果代码(示例代码)
魔方 section{width: 100px;height:100px;border:5px solid red; margin:50px auto;padding:100px;perspectiv ...
html5制作一个立方体,CSS3 3D transforms系列教程-立方体
学习制作3D翻转卡片是开始学习3D transform的一个好方法.一旦你掌握了3D翻转卡片的制作方法,是不是迫不及待的想制作更复杂的3D物体?我们在这个教程中将开始学习制作3D立方体. 3D立方体的 ...
css3 3d旋转图片立方体特效代码
纯 CSS3 3D 旋转立方体动画特效,该 3D 立方体使用 CSS3 perspective 制作,可以在水平方向.垂直方向和平面视角方向旋转,使用 CSS 来制作立方体动画,效果非常好.下面来看看 ...
html制作3d按钮,纯CSS3 3D按钮按钮酷似牛奶般剔透
本文作者html5tricks,转载请注明出处接下来我们来分析一下实现这款CSS3 3D按钮的步骤及其代码,总体而言,这款CSS3 3D按钮主要由HTML代码和CSS代码组成.实现原理是用两个spa ...
CSS3 3D旋转图片立方体特效
CSS3 3D旋转图片立方体特效代码. 效果图: 这是一个3D的立方体盒子给盒子添加动画属性使其可以转动. 原理: 原理其实很简单我们看到的一个立方体其实就是靠六个平面搭建起来的如图所示 :六 ...
HTML 动画、3D学习之制作魔方练习
魔方成果截图动画效果部分截图整体思路 1.创建一个父盒子,里面包含6个子盒子,用来当魔方的六个面,设置魔方的宽和高,可以在父盒子中设置,子盒子继承或者在子盒子中独立设置,但是比较麻烦. ...
纯CSS3制作炫酷的3D相册
纯CSS3制作炫酷的3D相册整体效果如下所示: 整体代码如下所示: html中的代码 <!DOCTYPE html> <html lang="en"> & ...
css3制作正方体,利用CSS3的3D效果制作正方体
学会用css3的3d效果制作一个正方体,有助于增强我们对3d场景的旋转和位移属性的理解.下面的动态图就是利用3d旋转位移,结合动画效果制作的.感兴趣的同学可以在完成正方体的制作基础上,再去探究一下添加 ...
CSS3 3D的总结（初学者易懂）
CSS3 3D案例的总结如果要说是3D的基础概念,首先我就来说一说rotateX().rotateY().rotateZ()这几个属性 rotateX():对应的是3D模型中的X轴上的旋转,传入的参 ...
如何制作魔方机器人-00绪论
零.魔方机器人复原魔方效果链接:https://pan.baidu.com/s/1h3ouxSBWX2H5geyZLaOt5A 提取码:9rt0 (视频4.35M) PS:只上传了百度云,没弄在其他 ...

html 制作魔方源代码,CSS3 3d环境实现立体魔方效果代码

html 制作魔方源代码,CSS3 3d环境实现立体魔方效果代码相关推荐

最新文章

热门文章

html 制作魔方源代码,CSS3 3d环境实现立体 魔方效果代码

html 制作魔方源代码,CSS3 3d环境实现立体 魔方效果代码相关推荐

最新文章

热门文章

html 制作魔方源代码,CSS3 3d环境实现立体魔方效果代码

html 制作魔方源代码,CSS3 3d环境实现立体魔方效果代码相关推荐