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爱心表白 这是程序 ...
最新文章
- 随机器学习兴起的Julia编程语言
- 2012 iis php mysql_Win2012 R2 IIS8.5+PHP(FastCGI)+MySQL运行环境搭建wordpress博客教程
- 作为程序员必须要掌握的三种语言
- Android 抽屉布局
- springboot 工程启动报错之Consider defining a bean of type ‘XXX’ in your configuration.
- 24-[模块]-re
- html密码字段语法,HTML input 标签的 type 属性
- 第二:python安装校验报错api-ms-win-crt-process-l1-1-0.dll 丢失的处理
- linux设备驱动程序 脚本之家,linux – 使用systemd自动挂载USB驱动器
- cydia所有中文源地址_Cydia中文源大全.doc
- WordPress 点击图片放大效果代码
- MySQL 数据库崩溃(crash)的常见原因和解决办法
- 微信小程序style的动态样式使用-三元表达式
- imageJ执行宏脚本出现了灰蒙蒙的图片。
- 武汉市10月双软认定好处、认定条件及9月认定名单公示
- 2022年上半年财神爷最爱照顾的星座
- linux 查看发行版本
- Serial Programming Guide for POSIX Operating Systems(转)
- Linux不用root权限安装nvcc
- 2021安居育才中学高考成绩查询,育才中学2017高考成绩