笔记：CSS3制作中轴旋转立方体

预览地址-纯 CSS 制作绕中轴旋转的立方体
参考样例-CodePen 立方体 demo

perspective

设置元素被查看位置的视图

perspective: number|none;

值	描述
number	元素距离视图的距离，以像素计
none	默认值。与 0 相同。不设置透视

-webkit-perspective: 800px;
-moz-perspective: 800px;
-ms-perspective: 800px;
-o-perspective: 800px;
perspective: 800px;

perspective-origin

设置 3D 元素的基点位置
perspective-origin 属性定义 3D 元素所基于的 X 轴和 Y 轴。该属性允许您改变 3D 元素的底部位置。
当为元素定义 perspective-origin 属性时，其子元素会获得透视效果，而不是元素本身。

perspective-origin: x-axis y-axis;

值	描述
x-axis	定义该视图在 x 轴上的位置。默认值：50%
y-axis	定义该视图在 y 轴上的位置。默认值：50%

-webkit-perspective-origin: 50% 200px;
-moz-perspective-origin: 50% 200px;
-ms-perspective-origin: 50% 200px;
-o-perspective-origin: 50% 200px;
perspective-origin: 50% 200px;

-webkit-box-reflect

制作倒影效果
不是W3C标准属性，需带上浏览器前缀

box-reflect:none | <direction> <offset> <mask-box-image>

值	描述
none	默认值，无倒影效果
direction	倒影方向（above：原图上方，below：原图下方，left：原图左侧，right：原图右侧）
offset	倒影与原图之间的距离（像素值/百分比）
mask-box-image	倒影的遮罩效果，背景图片/渐变生产的背景图像可参考鑫大的效果

-webkit-box-reflect: below 170px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0%, transparent), to(rgba(250, 250, 250, 0.1)));

transform-origin

设置旋转元素的基点位置

transform-origin: x-axis y-axis z-axis;

值	描述
x-axis	定义视图被置于 X 轴的何处。可能的值（left/center/right/length/%）
y-axis	定义视图被置于 Y 轴的何处。可能的值（top/center/bottom/length/%）
z-axis	定义视图被置于 Z 轴的何处。可能的值（length）

transform-origin:20% 40%;

笔记：CSS3制作中轴旋转立方体相关推荐

网页特效：用CSS3制作3D图片立方体旋转特效
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
如何用css3制作一个旋转的立方体
css3增加的动画效果使得前端制作某些动画更加方便,流畅,如何制作一个最简单的会旋转的立方体呢?话不多说,直接上代码! html代码如下,需要一个大的div包裹六个div作为立方体的六个表面 < ...
3d旋转图片制作HTML,js css3制作3D旋转图片切换代码
特效描述:js css3 3D旋转图片切换,js css3酷炫的3D图片旋转切换,3D旋转的图片轮播代码.(不兼容IE6,7,8) 代码结构 1. 引入CSS 2. HTML代码 3D Rotatin ...
如何让图片自动旋转html5,图片旋转特效纯HTML5+CSS3制作图片旋转
transform的四个属性: ①旋转--->rotate(参数a),单位deg,表示旋转角度,正数顺时针,负数逆时针. ②缩放--->scale(参数a),单位1,也就是"没有 ...
制作3D图片立方体旋转特效
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
用css3制作旋转加载动画的几种方法
2019独角兽企业重金招聘Python工程师标准>>> 以WebKit为核心的浏览器,例如Safari和Chrome,对HTML5有着很好的支持,在移动平台中这两个浏览器对应的就是i ...
css3制作旋转动画
现在的css3真是强大,之前很多动画都是用jq来实现,但是css3制作的动画要比jq实现起来简单很多,今天呢,我自己也写了一个css旋转动画和大家分享.效果如下面的图片思路:1.制作之前呢,我们先来 ...
java3D实现空间立方体,纯CSS3实现一个旋转的3D立方体盒子
简单介绍上网易前端微专业课程,里面有一个课外作业是实现一个3D旋转立方体.花了点时间做了下.还有点意思.写个简单教程.供大家学习. 先放上终于要实现的效果注:代码在chrome 43.0.2357 ...
CSS3动画制作的旋转风车，大家五一节日快乐
✅作者简介: 大家好五一快乐,我是痴心阿文,你们的学友哥,今天给大家分享一个CSS3动画制作的旋转风车!

笔记：CSS3制作中轴旋转立方体

perspective

perspective-origin

-webkit-box-reflect

transform-origin

笔记：CSS3制作中轴旋转立方体相关推荐

最新文章

热门文章