html5css写旋转立方体,css练习-旋转的立方体

1. 建立HTML结构

立方体有六个面，分别使用六个div

外面使用wrap容器包裹，作为整体，用来执行旋转动画

2. 整体样式

body {

perspective: 1000px;

}

.wrap {

position: relative;

width: 200px;

height: 200px;

margin: 200px auto 0;

/* transform: rotateX(45deg) rotateY(45deg); */

transform-style: preserve-3d;

}

.wrap div {

position: absolute;

width: 200px;

height: 200px;

border: 1px solid #000000;

background-color: orange;

}

因为要旋转的是整体，所以给wrap的父级body添加视距

后面要设置的背景图片的大小是200*200的，所以给容器大小设置相同的大小

给wrap设置transform-style，开启三维立体空间，如果没设置，看起来就会像一个平面

为了方便观察，给wrap先设置一个小角度的旋转

3. 立方体各个面的样式

.box1 {

background: url(img/布丁.png) no-repeat;

transform: translateZ(100px);

}

.box2 {

background: url(img/棒冰.png) no-repeat;

transform: rotateX(90deg) translateZ(100px);

}

.box3 {

background: url(img/爆米花.png) no-repeat;

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

}

.box4 {

background: url(img/碧根果.png) no-repeat;

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

}

.box5 {

background: url(img/蛋糕.png) no-repeat;

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

}

.box6 {

background: url(img/饼干.png) no-repeat;

transform: rotateX(180deg) translateZ(100px);

}

六个面进行不同角度，不同程度的旋转。

然后向朝向的方向平移100px的距离

4. 动画

@keyframes myRotate{

from{

transform: rotateX(0) rotateY(0);

}

to{

transform: rotateX(360deg) rotateY(360deg);

}

设置动画的开始状态和结束状态

然后在wrap中添加动画

animation: myRotate 2s infinite linear;

5. 完成

image.png

html5css写旋转立方体,css练习-旋转的立方体相关推荐

写给女朋友的3D旋转相册
写给女朋友的3D旋转相册效果图直接把图片换成自己需要的就可以了项目结构核心代码 <!DOCTYPE html> <html> <head lang=" ...
css元素旋转原点,使用transform-origin属性改变元素变换原点
使用CSS中的旋转函数可以让元素旋转指定的角度,比如transform:rotate(45deg)这条声明是表示将元素顺时针旋转45度,这里的旋转是按照一个默认的原点进行的,在CSS里可以使用tran ...
【CSS】CSS之旋转动画
目录 iconfont图标的使用进入https://www.iconfont.cn 位移旋转转换原点缩放位移&旋转&缩放注意点渐变色动画关键帧鼠标经过暂停逐帧动画 ...
css animation动画完成后隐藏_如何使用CSS实现旋转地球动画效果
旋转地球功能实现主要借助于CSS动画效果完成,通过移动地图背景图层,云彩图层等,在视觉上呈现出旋转地球效果.旋转地球最终实现效果如下图所示: 旋转地球效果展示设计思路与核心技术旋转地球效果实现主要 ...
css transform旋转属性
将以下代码复制到本地就可以看到效果: <!DOCTYPE html> <html lang="en"> <head><meta chars ...
HTML+CSS制作旋转的loading效果
HTML+CSS制作旋转的loading效果效果图如下: HTML部分源代码如下: <!DOCTYPE html> <html lang="en">< ...
css实现旋转的小流星动画
效果如下: 完整代码如下 : <!DOCTYPE html> <html lang="en"> <head><meta charset=& ...
js设置css色相旋转_色相旋转颜色方案是否保留了对色盲友好的能力？
js设置css色相旋转 Hue rotation is often an easy way to change the appearance of a plot or figure without t ...
css 图片旋转样式
文章目录前言一.css 图片旋转样式总结前言提示:这里可以添加本文要记录的大概内容: 一.css 图片旋转样式示例:pandas 是基于NumPy 的一种工具,该工具是为了解决数据分析任务 ...

html5css写旋转立方体,css练习-旋转的立方体

html5css写旋转立方体,css练习-旋转的立方体相关推荐

最新文章

热门文章