用css3画3d动画的思路

最近试了下CSS3动画，现在通过一个例子简单讲一讲我用css3画3d视图的思路。

任何时候敲代码前都要想清楚我要干什么，我要敲一个简单的3d旋转画册。

一、

1.首先用一个总容器包含所有的图片，设定属性perspective: 1000px，表示他距离我们屏幕1000px的距离，从二维变成了三维

2.要使用3d旋转，必先要有一个参考系使所有图片围绕他旋转，在总容器里面加一个div，添加属性transform-style: preserve-3d就可以变成参考系。

3.然后在这个div里设置动画效果不断旋转animation: rotation 18s infinite linear

4.把所有图片放进这个div里面，控制图片距离这个div的距离translateZ( XXpx )，所有图片就像太阳系一样围绕旋转了

5.但是这里有一个缺点，图片还不够立体，因为旋转时图片角度没有变化，这就需要我们改变每个图片的角度

二、

1.黄色是总容器contain

2.蓝色是参考系carousel

3.效果图

时间： 2024-11-09 03:36:58

用css3画3d动画的思路的相关文章

css3实现3D动画轮播图

这个感觉有点水,只是一个很简单的css3的3D动画,不过对于不会的人来说,应该还是蛮能唬人的吧,哈. 原理很简单,老规矩,都在注释里面,可以直接复制走代码,粘贴 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { padding: 0; marg

初步学习css3之3D动画

本人是一名前端菜鸟,在css3如此火爆的时代,今天才来接触这个神秘的东西,第一次接触到的就是使用css3制作3d动画,特来写此文章,高手勿喷. 以下是body部分 <body> <div id="my3d"> <div id="pagegroup"> <div class="page" id="page1">1</div> <div class="pa

如何制作css3的3d动画——以骰子旋转为例，详解css3动画属性

首先先来看两个用css3实现的炫酷的3d动画效果 1 2 3 4 5 6 你没看错,这个炫酷的效果都是用css3实现的. 下面是动画实现所需要用到的几个css3属性. 1.perspective:用来实现一个3d的场景 写3D效果的第一步是要创建一个3D场景,即索要实现效果的模块.这里用到了 perspective 属性和 perspective-origin 属性. perspective:用来定义3d动画距离浏览器的距离,单位是(px). perspective-origin:效果渲染的视角

【原】CSS3的3D动画 ——3D旋转之骰子样式的钟表（2）下 - 模仿智能社网页下的.md

之前看到智能社主页的那个骰子样式的钟表,最近研究了一下,虽然没有仔细看他是怎么做的,但是学了css3的动画之后想自己尝试着写一下,用到的原理可能和智能社网站的不太一样,我自己主要用到了css3和js. 程序写到一半,发现只有chrome和ff支持,而用ie11是没有效果的,然后用ie11去打开智能社网页,效果也是没有,调查了一下,应该是transform-style:preserve-3d这个样式在ie11下还不支持,使得对象无法以3d的样式呈现,至于兼容方式,自己还没有花时间研究,所以这个效果

【学】CSS3的3D动画 ——3D旋转（1）—— 妙味课堂

最近学了妙味的css3的动画,2D,3D的都有,先写一个最简单的3d翻转效果,鼠标移入div,正反面翻转效果. 注意点有: 要给正反面外面加个父级: transform-style: preserve-3d;是加在正反面的父级,使动画具有3d的效果:但是ie11并不支持preserve-3d perspective也要加在父级上,使动画具有透视效果: 要给父级也加上宽高,否则动画没有效果 <style> #box{ margin: 70px auto; width: 300px; height

【学】CSS3的3D动画 ——3D旋转之骰子样式的钟表（2）上—— 妙味课堂

这个是3D旋转的进阶版,是一个类似与骰子的正方体.这个版本只有秒数的个位数,还没有写整个钟表,下面那个版本好好想想该怎么写 这个效果需要用到transform-style: preserve-3d. 利用transform: rotateX, rotateY, rotateZ来定义物体转动轴,实现3D旋转 给一个正方体设置6个面,每个面都设置旋转基面,并且直接先朝各个方向转90度,有一个面要注意,就是和最前面的那个面的对面,不用转,但是要用transform: translateZ()来让这个面

css3 html5 3D动画练习

<!DOCTYPE html> <HTML> <HEAD> <TITLE> New Document </TITLE> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <style type="text/css"> div{ margin-bottom:10px; width:

css3的基础用法，新手必看哈（还有css3和jquery动画的对比）

第一步: 定义动画,名字可以各种起,就像方法名一样 1. 定义动画,名称为fadeIn @-webkit-keyframes fadeIn { 0% { opacity: 0; /*初始状态 透明度为0*/ } 50% { opacity: 0; /*中间状态 透明度为0*/ } 100% { opacity: 1; /*结尾状态 透明度为1*/ } } 方法里面还有很多写法: 如: /* 定义css方法,名字叫消失 Hides a leaf towards the very end of th

Css3动画（一） 如何画3D旋转效果或者卫星围绕旋转效果

如何画3D旋转效果或者卫星围绕旋转效果,当然这个也是工作中的一个任务,我在网上翻了一下,并没有找到类似的东西,所以写下来还是费了一番功夫,因此我把它拿出来记录一下,当然替换了一部分内容.好了,话不多说,进入正题. 我们都知道,浏览器是一个平面的视觉效果,如何在一个平面上看出立体的3D效果呢,其实就是一个视觉差的问题.那我们就从一个平面视觉效果一步一步画出立体的3D效果来.我还是先把效果放出来吧,点击预览(终版) 一.先画出平面视觉上卫星的旋转轨迹 卫星的轨迹一般都是圆的或者椭圆的,我们就先以一个