html魔方转动效果,简单说 用CSS做一个魔方旋转的效果
说明
魔方大家应该是不会陌生的,这次我们来一起用CSS实现一个魔方旋转的特效,先来看看效果图!
解释
我们要做这样的效果,重点在于怎么把6张图片,摆放成魔方的样子,而把它们摆放成魔方的样子,重点在于用好CSS的transform,这是非常重要的,好的,我们先拼出一个魔方的样子。
效果图
代码(代码比较长,朋友们可以直接粘贴复制到电脑看效果)
/*最外层容器样式*/
.wrap {
width: 200px;
height: 200px;
margin: 200px;
position: relative;
}
/*包裹所有容器样式*/
.cube {
width: 200px;
height: 200px;
margin: 0 auto;
transform-style: preserve-3d;
/* 为了方便观察,将整个魔方进行旋转 */
transform: rotateX(-30deg) rotateY(-80deg);
}
.cube div {
position: absolute;
width: 200px;
height: 200px;
opacity: 0.8;
transition: .4s;
}
/*定义所有图片样式*/
.pic {
width: 200px;
height: 200px;
}
.cube .out_front {
transform: rotateY(0deg) translateZ(100px);
}
.cube .out_back {
transform: translateZ(-100px) rotateY(180deg);
}
.cube .out_left {
transform: rotateY(-90deg) translateZ(100px);
}
.cube .out_right {
transform: rotateY(90deg) translateZ(100px);
}
.cube .out_top {
transform: rotateX(90deg) translateZ(100px);
}
.cube .out_bottom {
transform: rotateX(-90deg) translateZ(100px);
}
/*鼠标移入后样式*/
.cube:hover .out_front {
transform: rotateY(0deg) translateZ(200px);
}
.cube:hover .out_back {
transform: translateZ(-200px) rotateY(180deg);
}
.cube:hover .out_left {
transform: rotateY(-90deg) translateZ(200px);
}
.cube:hover .out_right {
transform: rotateY(90deg) translateZ(200px);
}
.cube:hover .out_top {
transform: rotateX(90deg) translateZ(200px);
}
.cube:hover .out_bottom {
transform: rotateX(-90deg) translateZ(200px);
}
我们来分析一下上面的代码
先说结构部分,看图
我们继续说CSS部分,主要是下面这4部分,我们说说每个部分中比较重要的
1、最外层容器样式
position: relative; ,主要是因为后面会用到position: absolute;
absolute,生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。
2、包裹所有容器样式
transform-style: preserve-3d;
使被转换的子元素保留其 3D 转换:
参考链接 http://www.runoob.com/cssref/...
3、定义所有图片样式
position: absolute;
让每个面先在同一个位置,方便后面转换位置
效果图
Transform字面上就是变形,改变的意思。在CSS3中transform主要包括以下几种:旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。
上下两个面 沿X轴旋转一定角度,沿Z轴位移一定像素。
前后左右四个面 沿Y轴旋转一定角度,沿Z轴位移一定像素。
注意,后面是 先位移,再旋转,其他面是先旋转,再位移,千万别弄错顺序。
4、鼠标移入后样式
只是改变translateZ的值,将位移的距离再增加100px
到此,我们就弄出一个魔方了,至于最开始我们看到的魔方中还有嵌套一个小魔方,就很容易了,把这个魔方的六个面复制一下,然后粘贴到cube中,然后改变大小,和位移的距离就可以了,要让整个魔方动起来 ,就在最外面的容器(cube)上,加上动画就可以了。
总结
做这样的一个效果,主要是为了练习,transform,这个效果重点就是搞明白每个面要旋转多少度,然后位移的距离是一样的(不是说取值是一样的),明白了之后,做这个效果就很简单了,下方有完整的代码!需要的朋友就CV吧!
完整示例代码
/*最外层容器样式*/
.wrap {
width: 200px;
height: 200px;
margin: 200px;
position: relative;
}
/*包裹所有容器样式*/
.cube {
width: 200px;
height: 200px;
margin: 0 auto;
transform-style: preserve-3d;
transform: rotateX(-30deg) rotateY(-80deg);
animation: rotate linear 20s infinite;
}
@-webkit-keyframes rotate {
from {
transform: rotateX(0deg) rotateY(0deg);
}
to {
transform: rotateX(360deg) rotateY(360deg);
}
}
.cube div {
position: absolute;
width: 200px;
height: 200px;
opacity: 0.8;
transition: all .4s;
}
/*定义所有图片样式*/
.pic {
width: 200px;
height: 200px;
}
.cube .out_front {
transform: rotateY(0deg) translateZ(100px);
}
.cube .out_back {
transform: translateZ(-100px) rotateY(180deg);
}
.cube .out_left {
transform: rotateY(-90deg) translateZ(100px);
}
.cube .out_right {
transform: rotateY(90deg) translateZ(100px);
}
.cube .out_top {
transform: rotateX(90deg) translateZ(100px);
}
.cube .out_bottom {
transform: rotateX(-90deg) translateZ(100px);
}
/*定义小正方体样式*/
.cube span {
display: block;
width: 100px;
height: 100px;
position: absolute;
top: 50px;
left: 50px;
}
.cube .in_pic {
width: 100px;
height: 100px;
}
.cube .in_front {
transform: rotateY(0deg) translateZ(50px);
}
.cube .in_back {
transform: translateZ(-50px) rotateY(180deg);
}
.cube .in_left {
transform: rotateY(-90deg) translateZ(50px);
}
.cube .in_right {
transform: rotateY(90deg) translateZ(50px);
}
.cube .in_top {
transform: rotateX(90deg) translateZ(50px);
}
.cube .in_bottom {
transform: rotateX(-90deg) translateZ(50px);
}
/*鼠标移入后样式*/
.cube:hover .out_front {
transform: rotateY(0deg) translateZ(200px);
}
.cube:hover .out_back {
transform: translateZ(-200px) rotateY(180deg);
}
.cube:hover .out_left {
transform: rotateY(-90deg) translateZ(200px);
}
.cube:hover .out_right {
transform: rotateY(90deg) translateZ(200px);
}
.cube:hover .out_top {
transform: rotateX(90deg) translateZ(200px);
}
.cube:hover .out_bottom {
transform: rotateX(-90deg) translateZ(200px);
}
html魔方转动效果,简单说 用CSS做一个魔方旋转的效果相关推荐
- 简单说 用CSS做一个魔方旋转的效果
说明 魔方大家应该是不会陌生的,这次我们来一起用CSS实现一个魔方旋转的特效,先来看看效果图! 解释 我们要做这样的效果,重点在于怎么把6张图片,摆放成魔方的样子,而把它们摆放成魔方的样子,重点在于用 ...
- [css] 使用css3做一个魔方旋转的效果
[css] 使用css3做一个魔方旋转的效果 总的来说,用了一些 3D 效果的样式,如 translate3d,rotate3d,perspective,transform-style: preser ...
- 用HTML+CSS做一个漂亮简单的个人网页~个人相册介绍个人主页模板(6个页面) ~学生HTML个人网页作业作品~
用HTML+CSS做一个漂亮简单的个人网页 ~ 个人相册介绍个人主页模板(6个页面) 学生HTML个人网页作业作品 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作 ...
- 用HTML+CSS做一个漂亮简单的个人网页~个人相册介绍个人主页模板(6个页面) ~学生HTML个人网页作业作品~...
用HTML+CSS做一个漂亮简单的个人网页 ~ 个人相册介绍个人主页模板(6个页面) 学生HTML个人网页作业作品 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作 ...
- 【每日一练】31—CSS 实现一个彩色旋转方块loading动画效果
写在前面 今天练习的这个项目是一个加载动画,这个加载动画主要是为了在网络不好,页面加载缓慢时给用户的一个提示,一个好的加载动画,可以缓解用户的焦虑情绪,让等待变得有趣,现在很多产品也越来越注重这一块的 ...
- html怎么让方块自动旋转,如何使用纯CSS实现一个圆环旋转错觉的动画效果(附源码)...
本篇文章给大家带来的内容是关于如何使用纯CSS实现一个圆环旋转错觉的动画效果,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 效果预览 源代码下载 https://github.com ...
- [css] 使用css写一个垂直翻转图片的效果
[css] 使用css写一个垂直翻转图片的效果 transform: rotateX(180deg); /* 垂直镜像翻转 */ 个人简介 我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持 ...
- HTM+CSS实现立方体图片旋转展示效果
目的:HTM+CSS实现立方体图片旋转展示效果 环境: 系统:Win10 环境: 一.示例1. 话不多说直接上代码 <html><head><style>/*立方体 ...
- 如何用css做一个爱心
摘要:HTML的标签都比较简单,入门非常的迅速,但是CSS是一个需要我们深度挖掘的东西,里面的很多样式属性掌握几个常用的便可以实现很好看的效果,下面我便教大家如何用CSS做一个爱心. 前期预备知识: ...
最新文章
- Vue API(directives) 自定义指令
- CF1253E Antenna Coverage
- Android 进程间通信——Service、Messenger
- linux dev nfc,linux下的nfc开发
- java grpc简单例子
- 软测人员周报怎么写?(模板)
- 笔记———No.1 使用matlab画圆
- node mysql菜鸟教程_Node.js 文件系统
- 直播短视频源码要如何开发?简单几步教你快速开发!
- [渝粤教育] 山东职业学院 话说铁道 参考 资料
- java抠图边框颜色处理_ps抠图边缘颜色怎么处理
- sws_scale概念讲解
- Unity游戏开发——新发教你做游戏(三):3种资源加载方式
- 2022上半年信息系统项目管理师论文真题
- C语言的取反操作(15)
- STM32F103驱动IIC OLED显示屏
- ERP与CRM、OA等管理系统区别?
- java-net-php-python-61java旅游网站单计算机毕业设计程序
- linux lib.a反编译,android反编译-smali文件语法
- egg-jwt egg jwt 使用
热门文章
- 《R语言数据挖掘》读书笔记:三、分类
- Linux C++ IDEs
- 福大软工1816 · 第六次作业 - 团队选题报告
- Python案例篇3-pip install 失败 Command “python setup.py egg_info“ failed with error code 1
- 解决win2008 R2远程桌面授权过期的方法
- 小米平板3最简单刷成开发版获得ROOT权限的步骤
- 【渝粤教育】电大中专消费者行为学30分钟交卷(1)作业 题库
- cadence Virtuoso ADE原理图库中的VCVS(压控电压源)使用
- ucos 和uclinux的区别及各自的特点
- Android开发的各个领域发展前景?路线?规划未来看这篇