css同时多个立方体旋转,CSS3 旋转立方体问题详解

3D坐标概念

当元素进行旋转时，他的坐标轴也跟着他进行旋转

注意-y方向问题

旋转立方体的效果

分析

一个容器包含6个div

position：absolute 之后6个面完全重合

通过trandform：rotateX/Y/Z()，translateX/Y/Z()调整到相应位置

添加transition动画效果

注意这里面的旋转是绕着他的中心线进行旋转的所以唯一100px

他在旋转时，他的坐标轴也是跟着他进行旋转的(这很重要)

代码

Document

margin: 0px;

padding: 0px;

}

body{

perspective: 800px;

background: #000000;

}

#container{

height: 200px;

width: 200px;

margin: 100px auto 0;

position: relative;

transform-style: preserve-3d;

animation: move 1s ease infinite;

}

@keyframes move{

from{

transform: rotateY(0deg) rotateZ(0deg);

}

to{

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

}

#container>div{

height: 100%;

width: 100%;

border-radius: 5px;

background: rgba(255,255,255,0.5);

position: absolute;

left: 0px;

right: 0px;

text-align: center;

line-height: 200px;

font-size: 30px;

}

#one{

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

}

#two{

transform:translateZ(100px) ;

}

#three{

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

}

#four{

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

}

#five{

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

}

#six{

transform: translateZ(-100px);

}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

css同时多个立方体旋转,CSS3 旋转立方体问题详解相关推荐

旋转排序数组系列题详解
旋转排序数组系列题详解文章目录旋转排序数组系列题详解一.问题描述:旋转数组的最小数字二.分析:二分查找三.代码四.问题描述:寻找旋转排序数组中的最小值五.分析:二分搜索六.代码七.问 ...
CSS3动画属性 animation详解（看完就会）
CSS3动画属性 animation 文章包含个人理解错误请指出往期文章 [css高级]变量详解轮播图swiper框架的基本使用 [Transform3D]转换详解(看完就会) [css动画] ...
html中transition默认,CSS3中的Transition详解
W3C标准中对css3的transition这是样描述的:"css的transition允许css的属性值在一定的时间区间内平滑地过渡.这种效果可以在鼠标单击.获得焦点.被点击或对元素任何改 ...
CSS3的@keyframes用法详解:
原文出处: http://www.cnblogs.com/zuihongyan/p/5902541.html CSS3的@keyframes用法详解: 此属性与animation属性是密切相关的,关于 ...
html选择器有哪些child,css3选择器child有哪些？css3选择器child用法详解
本篇文章给大家带来的内容是关于css3选择器child有哪些?css3选择器child用法详解,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 对于CSS3的结构伪类选择器,为了更好地 ...
html中overflow是什么标签,CSS中Overflow的属性是什么？Overflow属性详解
很多人学习css的时候,不太知道Overflow的属性是什么?怎么用Overflow的属性,下面Gxlcms为你总结一下Overflow属性和用法. 我们都知道,盒子的大小和盒子的位置都是可以用css ...
html中以菱形为边框,深入浅析css3 border-image边框图像详解
我的作风:首先给大家作自我介绍 hello,大家好,我叫小黑,也叫xiaoho,目前喜欢并从事写页面.因为不喜欢在那些类似BBS型的论坛上发帖,所以之前在 html-js 上发表几篇戳文,现在申请了前 ...
CSS3入门基础（详解）
CSS3入门基础详解一.基本概念 css:层叠样式表(Cascading Style Sheets) 样式定义如何显示html元素样式是为了解决内容与表现分离的问题多个样式定义可层叠为一样式通 ...
CSS HACK收集：在IE6下hack的方法详解
原文:http://www.html5cn.org/article-5027-1.html + 针对IE7 * 针对ie6和ie7 _ 针对ie6 最好采用条件注释的方法本篇文章小编为大家介绍CS ...
【OpenCV3】图像旋转与平移——cv::warpAffine()详解
图像旋转和平移是图像处理中常用的一种操作,opencv2和opencv3中对图像的旋转和平移都是通过仿射变换函数cv::warpAffine()来实现的. 1.图像的旋转图像的旋转具体实现分为两步: ...

css同时多个立方体旋转,CSS3 旋转立方体问题详解

css同时多个立方体旋转,CSS3 旋转立方体问题详解相关推荐

最新文章

热门文章