半透明旋转魔方特效的实现

大家好，日更博主上线啦！今天分享的第二篇是旋转魔方的效果，通过css有两种方式实现：1.先平移再旋转，2：先旋转再平移
下面是代码，原理比较简单~~

<!DOCTYPE html>
<html lang="ch"><head><meta charset="UTF-8"><title>旋转魔方</title><style type="text/css">html {perspective: 800px; /*   perspective越大表示距眼睛越远 设置元素被查看位置的视图： 设置了这个才有后面的3d效果 */}.all {width: 200px;height: 200px;margin: 300px auto;/*background-color: #f10215;*//*设置相对定位 让它的子元素参照它 绝对定位*/position: relative;/*transform-style 设置3d变形效果 必须给最近的父元素 不加没有3d*/transform-style: preserve-3d;/* 设置动画的执行时间 无限循环 迅速运动 */animation: move 10s infinite linear;/* 设置最大div的旋转位置  x y z 默认都是center *//* transform-origin: center center 100px; */}/*设置all下的所有的div的样式 给他们宽高和透明效果*/.all > div {width: 200px;height: 200px;opacity: 0.7;position: absolute;}img {/* vertical-align: top; */width: 200px;height: 200px;/* background-size: contain; */}/* 先平移再旋转 *//* 沿x轴平移 左负右正 *//* 沿y轴平移  上负下正 *//* 沿z轴平移  前正后负 *//* .box1 {transform-origin: left top;transform:  translateX(200px) rotateY(-90deg);}.box2 {transform-origin: right top;transform:  translateX(-200px) rotateY(90deg);}.box3 {transform-origin:left bottom;transform:  translateY(-200px) rotateX(-90deg);}.box4 {transform-origin:left top;transform:  translateY(200px) rotateX(90deg);}.box5 {transform: translateZ(200px);}.box6 {} *//*创建关键帧 */@keyframes move {from {transform: rotateX(0) rotateZ(0);}to {transform: rotateX(1turn) rotateZ(1turn);}}/* 先旋转再平移   沿中间的轴旋转 后面就不用改变主轴位置*//*设置6个面的旋转  想象一下 空间中有6个面 这六个面最初都是覆盖在同一个平面的 然后经过平移 到6个位置*/.box1 {transform: rotateY(90deg) translateZ(100px);}.box2 {transform: rotateY(90deg) translateZ(-100px);}.box3 {transform: rotateX(90deg) translateZ(100px);}.box4 {transform: rotateX(90deg) translateZ(-100px);}.box5 {transform: translateZ(100px);}.box6 {transform:  translateZ(-100px);}                                                    </style></head><body><!--创建一个外层的容器--><div class="all"><div class="box1"><img src="pic/008.jpg"></div><div class="box2"><img src="pic/002.jpg"></div><div class="box3"><img src="pic/003.jpg"></div><div class="box4"><img src="pic/004.jpg"></div><div class="box5"><img src="pic/005.jpg"></div><div class="box6"><img src="pic/007.jpg"></div></div></body>
</html>

Like it if it’s useful ，thanks~~

半透明旋转魔方特效的实现相关推荐

可控制转速CSS3旋转风车特效
以前制作网页动画一般使用javascript,现在已经有越来越多动动画使用纯CSS实现,并且动画的控制也可以使用CSS3实现,因为CSS 3来了,CSS 3的动画功能确实强大.以下是一个纯CSS3制作 ...
html如何设置图片循环旋转动画效果,如何使用css3实现图片自动旋转的特效(完整代码)...
在介绍如何使用css3实现旋转图片特效的基础上,重点介绍了具体的步骤.这篇论文内容紧凑,希望大家能有所收获. 在浏览网页的过程中,你会遇到一种特殊的效果,叫做图片旋转:不同的图片会根据时间的变化在同一 ...
css3动画应用-音乐唱片旋转播放特效
css3动画应用-音乐唱片旋转播放特效核心点: 1.设置图片为圆形居中,使图片一直不停旋转. 2.文字标题(潘玮柏--反转地球)一直从左到右不停循环移动. 3.点击图标,音乐暂停,图片停止旋转:点击 ...
vue.js3D立方体旋转播放特效
使用vue.js实现3D立方体旋转播放特效: 思路: 1.正方体由6个面组成: 2.使用transform属性来设置各个面的位置: 3.在使用animation-play-state进行动画播放: 主 ...
用css编写一个简单的旋转魔方
其实这个就是对CSS3 transform 属性animation属性的一个简单的应用,在网页平面中创建6个面(div),让这6个面匀速的不停的旋转,要创造出来一个3d的感觉,在一个2维的网页平面上, ...
java编程之数字魔方（N阶数字魔方和数字旋转魔方）
N阶数字魔方原理: 定义一个奇数阶二维数组,把每个元素顺序填入不同的自然数,要求行列和对角线元素相加的结果相等. 效果图: 实现代码: import java.util.*; public clas ...
MATLAB画三维动态魔方/旋转魔方/旋转立方体
以下是我的思路先了解几个重要的函数 patch()函数原理:点按顺序连成封闭多边形. 使用: point_sequence=[1,2,3,4]; %点连接的顺序 square_xyz=[3,1,3 ...
css3魔方3乘3每层旋转_学习做旋转魔方 (css3)
学习做旋转魔方 (css3) 看到一个帖子做了一个旋转魔方, 想着试着学习练练手. 看着高手的代码按照自己的思路, 码了一下, 记下遇到的一些问题. html 代码片段 3D 魔方 Rubik's C ...
CSS动画之旋转魔方轮播
下面我将一步一步详解如何利用纯CSS实现一个旋转魔方轮播的效果. 总的来说我们需要实现以下两个主要功能: 构建一个能够旋转的立方体让立方体拥有基本轮播所具有的特性但在完成以上两点之前我们需要再次了 ...
web前端入门到实战：CSS动画之旋转魔方轮播
下面我将一步一步详解如何利用纯CSS实现一个旋转魔方轮播的效果. 总的来说我们需要实现以下两个主要功能: 构建一个能够旋转的立方体让立方体拥有基本轮播所具有的特性但在完成以上两点之前我们需要再次了 ...

半透明旋转魔方特效的实现

半透明旋转魔方特效的实现相关推荐

最新文章

热门文章