css 魔方,css 3d旋转魔方
/*魔方*/
.mofang {
width:60px;
height:60px;
margin:0 auto;
position:fixed;
z-index:999;
-webkit-perspective:1000px;
perspective:1000px;
right:0;
bottom:0;
-webkit-transform:translate(-80%,-80%);
transform:translate(-80%,-80%)
}
.cube {
width:100%;
height:100%;
position:absolute;
-webkit-transform-style:preserve-3d;
transform-style:preserve-3d;
-webkit-transform:rotateX(-15deg) rotateY(-20deg) translateZ(-100px);
transform:rotateX(-15deg) rotateY(-20deg) translateZ(-100px);
-webkit-transform-origin:center center -100px;
transform-origin:center center -100px;
-webkit-animation:around 5s cubic-bezier(.94,-.6,.45,1.31) infinite;
animation:around 5s cubic-bezier(.94,-.6,.45,1.31) infinite
}
.cube div {
width:80px;
height:80px;
display:block;
margin:0;
position:absolute
}
.cube div a {
color:#fff;
text-decoration:none;
text-align:center;
position:fixed;
top:50%;
left:50%;
-webkit-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
line-height:normal;
font-size:16px;
letter-spacing:3px
}
.cube .front {
-webkit-transform:rotateY(0) translateZ(40px);
transform:rotateY(0) translateZ(40px);
background-color:rgba(0,191,255,.7);
border:2px solid rgba(0,191,255,.7)
}
.cube .back {
-webkit-transform:rotateX(180deg) translateZ(40px);
transform:rotateX(180deg) translateZ(40px);
background-color:rgba(124,252,0,.7);
border:2px solid rgba(124,252,0,.7)
}
.cube .left {
-webkit-transform:rotateY(-90deg) translateZ(40px);
transform:rotateY(-90deg) translateZ(40px);
background-color:rgba(255,215,0,.7);
border:2px solid rgba(255,215,0,.7)
}
.cube .right {
-webkit-transform:rotateY(90deg) translateZ(40px);
transform:rotateY(90deg) translateZ(40px);
background-color:rgba(255,69,0,.7);
border:2px solid rgba(255,69,0,.7)
}
.cube .top {
-webkit-transform:rotateX(90deg) translateZ(40px);
transform:rotateX(90deg) translateZ(40px);
background-color:rgba(255,0,157,.7);
border:2px solid rgba(255,0,157,.7)
}
.cube .xaimian {
-webkit-transform:rotateX(-90deg) translateZ(40px);
transform:rotateX(-90deg) translateZ(40px);
background-color:rgba(184,111,220,.7);
border:2px solid rgba(184,111,220,.7)
}
@-webkit-keyframes around {
100% {
-webkit-transform:rotateX(-15deg) rotateY(-380deg) translateZ(-100px);
transform:rotateX(-15deg) rotateY(-380deg) translateZ(-100px)
}
}@keyframes around {
100% {
-webkit-transform:rotateX(-15deg) rotateY(-380deg) translateZ(-100px);
transform:rotateX(-15deg) rotateY(-380deg) translateZ(-100px)
}
}@media only screen and (max-width:767px) {
.mofang {
width:40px;
height:40px;
-webkit-transform:translate(-100%,-100%);
transform:translate(-100%,-100%);
}
.cube div {
width:60px;
height:60px
}
.cube div a {
font-size:12px;
letter-spacing:2px
}
.cube .front {
-webkit-transform:rotateY(0) translateZ(30px);
transform:rotateY(0) translateZ(30px);
}
.cube .back {
-webkit-transform:rotateX(180deg) translateZ(30px);
transform:rotateX(180deg) translateZ(30px)
}
.cube .left {
-webkit-transform:rotateY(-90deg) translateZ(30px);
transform:rotateY(-90deg) translateZ(30px)
}
.cube .right {
-webkit-transform:rotateY(90deg) translateZ(30px);
transform:rotateY(90deg) translateZ(30px)
}
.cube .top {
-webkit-transform:rotateX(90deg) translateZ(30px);
transform:rotateX(90deg) translateZ(30px)
}
.cube .xaimian {
-webkit-transform:rotateX(-90deg) translateZ(30px);
transform:rotateX(-90deg) translateZ(30px)
}
}
css 魔方,css 3d旋转魔方相关推荐
- 3d旋转相册代码源码_如何使用CSS开发精美3D旋转相册?
借助CSS所提供的animation动画属性及2D.3D变换属性,我们可以摆脱对JavaScript的依赖,设计开发各类效果优秀的前端动态效果,在之前文章和视频中我们也介绍了不少基于CSS与JavaS ...
- 如何用css实现一个3D旋转照片墙
一.前言 学习前端是件很有趣的事,今天我又来分享一下关于html+css实现的3D效果的照片墙的代码啦,希望感兴趣的小伙伴会喜欢! 正文: 今天,我们要做一个3D旋转相册,首先让我们了 ...
- 纯CSS 撩妹3D旋转相册
先看完成效果 *原形态为几张图片为成两个正方形,大正方形包着小正方形然后自主的旋转 *鼠标移入后外层(大正方形)变大继续旋转 2.基本布局 *一个box里包含两个box 3.基本CSS *CSS3 t ...
- css 实现文字3D旋转近清晰远模糊
3D旋转:父元素设置透距perspective:160vmin,子元素设置3D模式transform-style: preserve-3d 近清晰远模糊:通过filter:blur实现模糊,filte ...
- java编程之数字魔方(N阶数字魔方和数字旋转魔方)
N阶数字魔方 原理: 定义一个奇数阶二维数组,把每个元素顺序填入不同的自然数,要求行列和对角线元素相加的结果相等. 效果图: 实现代码: import java.util.*; public clas ...
- 用HTML+CSS代码制作3D旋转相册
我的开源管理系统:Vue 3.2 + TypeScript+ Pinia + Vite2 + Element-Plus Gitee 仓库:https://gitee.com/laramie/Geeke ...
- CSS 3D炫酷的 旋转魔方
最近在复习HTML 和 CSS,把以前做的一些小例子拿出来分享一下,也加深自己的印象 css 是通过 transform 来实现3D旋转的,看代码之前,先复习一下相关知识 transform-orig ...
- CSS3 3D旋转立方
##一.3D中的透视 1.透视是我们观察事物的方式 在美术学中,有一种画法叫做透视画法,他让我们对所观察的物体从二维拓展到三维,也就是说,平面的物体变成了立体,占据了独自的 ...
- 如何用html5制作3d旋转照片集
最近男友生日要到了,于是,我上网搜索如何制作照片集,作为男友的生日礼物之一,在我耗费几小时之后,终于成功了,撒花撒花~ 看完这篇文章,即使你完全不会html也可以制作成功 首先,你需要下载一个软件-- ...
- HTML5七夕情人节表白网页(抖音超火3D炫酷魔方) HTML+CSS+JavaScript 求婚示爱代码 520情人节告白代码 程序员表白源码 3D旋转相册 js烟花代码 css爱心表白
HTML5七夕情人节表白网页❤抖音超火❤3D炫酷魔方❤ HTML+CSS+JavaScript 求婚示爱代码 520情人节告白代码 程序员表白源码 3D旋转相册 js烟花代码 css爱心表白 这是程序 ...
最新文章
- “CRISPR婴儿”计划疯狂重启 顶级科学家们表示无力阻止
- Linux 技巧:让进程在后台可靠运行的几种方法(转)
- git永久保存账号密码
- linux socket资源耗尽,TCP的socket资源被耗尽的问题
- 无线网络技术基础 01
- C# 4.0 实现 Method Missing
- 第十一周学习进度报告
- OTA时代来了!由新一代私有云揭开序幕
- 汉字编码原则及0XA1与0X80代表的含义。(汉字编码原则为转发)
- 基于matlab的车牌识别系统设计
- 树莓派安装基地Debian-Pi-Aarch64系统 SSD启动
- java开发软件怎么安装不了_java开发软件的安装
- Eclipse代码格式化无效解决方案
- 保龄球记分程序c语言,保龄球的计分规则和比赛规则
- myelipse修改页面后 浏览器无变化
- 新年亲朋好友最经典的“互相伤害”,你中过几条?
- 软件项目管理复习(一-七章)
- netty(三) NioEventLoop再学习
- H5页面的测试点整理
- codeforces gym 100827A Runes
热门文章
- 基于arm嵌入式linux毕业设计,本科毕业论文--基于arm的嵌入式系统设计.doc
- flashfxp中文破解版|flashfxp v5.4绿色破解版下载免注册码(强大的fxp/ftp客户端)
- 暨南大学人文社科a类期刊_关于调整人文社科B类和C类期刊目录的通知
- 谷歌广告已拒登:恶意软件或垃圾软件 如何解决
- U956(MTK6589系列)移植乐蛙教程
- 通过使用中国移动随e行客户端软件在电脑上发短信
- 帧同步(LockStep)该如何反外挂 及 优化
- 互动快报读报软件绿色版 v5.061
- vue项目中使用百度离线地图
- 常见耳机品牌简介及鉴赏