html 实现3d效果代码,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 实现3d效果代码,CSS3 3D环境实现立体魔方效果代码相关推荐

css 3d魔方源代码,CSS3 3D环境实现立体魔方效果代码(示例代码)
魔方 section{width: 100px;height:100px;border:5px solid red; margin:50px auto;padding:100px;perspectiv ...
css立体3d效果动画,css3 实现动画，变换基点及3D效果~
各位小伙伴上次分享的爱心感觉如何呀~ 动画效果首先,娜娜在这边给大家认个错,上次分享落下了一个东西,就是动画效果,没有动画是实现不了爱心一条一条的动作的. 虽然那个爱心源代码已经给大家了,只要复制 ...
html简单盒子代码,CSS3 3D盒子超简单制作
这是我第一次在这里写文章,如果写得不好的话,请大家多多包涵一下. 在XX网学完CSS3之后,然后我懂了一个道理,XX网评论区域存在一个小明梗,这个梗是这样的:1+1=2, 2+2=4,问小明今年多少岁 ...
html制作3d按钮,纯CSS3 3D按钮按钮酷似牛奶般剔透
本文作者html5tricks,转载请注明出处接下来我们来分析一下实现这款CSS3 3D按钮的步骤及其代码,总体而言,这款CSS3 3D按钮主要由HTML代码和CSS代码组成.实现原理是用两个spa ...
html5倒计时效果,html5+css3进度条倒计时动画特效代码【推荐】
html5+css3进度条倒计时动画特效这个作品在今天上网找网络资源的时候无意中发现的,看到效果非常棒并且很实用,就第一时间把它整理出来与大家分享了,主要用到了html5.javascript和css ...
html图片鼠标动态效果代码,CSS3鼠标hover图片动画特效代码
这是一款CSS3鼠标hover图片动画特效代码.该鼠标hover动画使用简单的CSS transition技术,配合元素的宽度变化,制作出炫酷的鼠标hover图片遮罩层动画效果. 使用方法在页面中引 ...
html代码在线运行环境,ES5/可执行代码与执行环境
可执行代码类型一共有三种 ECMA 脚本可执行代码: 全局代码是指被作为 ECMAScript Eval 代码是指提供给 eval 内置函数的源代码文本.更精确地说,如果传递给 eval 内置函数的 ...
如何让nginx执行python代码_生产环境部署Python语言代码（django+uwsgi+nginx）
本文主要向大家介绍了生产环境部署Python语言代码(django+uwsgi+nginx),通过具体的内容向大家展示,希望对大家学习Python语言有所帮助. 基础环境不做介绍,在django开发w ...
html渐变线条代码,CSS3实现线性渐变用法示例代码详解
前言演示下太老版本浏览器的渐变实现了[IE9-]; IE9以前,渐变都是通过滤镜实现的,大体的写法就是这样; .testDiv { width:400px; height:400px; border ...
css使图片有3d效果,利用CSS3实现3D倾斜视差图片展示特效
特效描述:利用CSS3实现 3D倾斜视差图片展示特效.利用CSS3实现3D倾斜视差图片展示特效代码结构 1. HTML代码 Movies Popular Princess Mononoke Sp ...

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

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

最新文章

热门文章

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

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

最新文章

热门文章

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

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