CSS3之3D效果中的transform运用

css3中添加了很多新的标签

属性	描述	css
transform	向元素应用 2D 或 3D 转换。	3
transform-origin	允许你改变被转换元素的位置。	3
transform-style	规定被嵌套元素如何在 3D 空间中显示。	3
perspective	规定 3D 元素的透视效果。	3
perspective-origin	规定 3D 元素的底部位置。	3
backface-visibility	定义元素在不面对屏幕时是否可见。	3

可以通过这些属性来对一个平面图形操作达到一个立体的效果

函数	描述
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)	定义 3D 转换，使用 16 个值的 4x4 矩阵
translate3d(x,y,z)	定义 3D 转化
translateX(x)	定义 3D 转化，仅使用用于 X 轴的值
translateY(y)	定义 3D 转化，仅使用用于 Y 轴的值
translateZ(z)	定义 3D 转化，仅使用用于 Z 轴的值
scale3d(x,y,z)	定义 3D 缩放转换
scaleX(x)	定义 3D 缩放转换，通过给定一个 X 轴的值
scaleY(y)	定义 3D 缩放转换，通过给定一个 Y 轴的值
scaleZ(z)	定义 3D 缩放转换，通过给定一个 Z 轴的值
rotate3d(x,y,z,angle)	定义 3D 旋转
rotateX(angle)	定义沿 X 轴的 3D 旋转
rotateY(angle)	定义沿 Y 轴的 3D 旋转
rotateZ(angle)	定义沿 Z 轴的 3D 旋转
perspective(n)	定义 3D 转换元素的透视视图

红色的标签就是这次案例里面所用到的

  1 <!DOCTYPE html>
  2 <html lang="en">
  3
  4 <head>
  5     <meta charset="UTF-8">
  6     <title>Document</title>
  7     <style>
  8         * {  9             margin: 0;
 10             padding: 0;
 11         }
 12
 13         .container { 14             width: 200px;
 15             height: 200px;
 16             margin: 200px auto;
 17             border: 1px solid black;
 18             perspective: 800px;
 19             transform-origin: center center;
 20         }
 21
 22         #divE { 23             width: 200px;
 24             height: 200px;
 25             position: relative;
 26             transform-style: preserve-3d;
 27             transform-origin: center center -50px;
 28         }
 29
 30         #divE figure { 31             width: 200px;
 32             height: 200px;
 33             left: 0;
 34             top: 0;
 35             /*display: block;*/
 36             position: absolute;
 37             transform-origin: center center;
 38         }
 39
 40         .front { 41             transform: rotateY( 0deg) translateZ( 100px);
 42             background: red;
 43             opacity: 0.5;
 44         }
 45
 46         .back { 47             transform: rotateY( 180deg) translateZ( 100px);
 48             background: blue;
 49             opacity: 0.5;
 50         }
 51
 52         .right { 53             transform: rotateY( 90deg) translateZ( 100px);
 54             background: gold;
 55             opacity: 0.5;
 56         }
 57
 58         .left { 59             transform: rotateY( -90deg) translateZ( 100px);
 60             background: green;
 61             opacity: 0.5;
 62         }
 63
 64         .top { 65             transform: rotateX( 90deg) translateZ( 100px);
 66             background: lightblue;
 67             opacity: 0.5;
 68         }
 69
 70         .bottom { 71             transform: rotateX( -90deg) translateZ( 100px);
 72             background: indigo;
 73             opacity: 0.5;
 74         }
 75
 76         .myfirst { 77             /*定义动画插件名变*/
 78             animation-name: myfirst;
 79             /*定义动画完成一个周期需要的时间*/
 80             animation-duration: 2s;
 81             /*定义动画开始的时间*/
 82             animation-delay: 1s;
 83             /*定义动画的速度曲线,这是定义为匀速*/
 84             animation-timing-function: linear;
 85             /*定义动画播放的次数,这里定义为重复*/
 86             animation-iteration-count: infinite;
 87             /*定义下一周期是否逆向,这里定义为逆向*/
 88             animation-direction: alternate;
 89             /*定义动画是否暂停播放,这里定义为播放*/
 90             animation-play-state: running;
 91         }
 92
 93         @keyframes myfirst { 94             0% {
 95                 transform: rotate3d(0, 1, 0, 0deg);
 96                 /*transform: rotate3d(1, 0, 0, 0deg);*/
 97                 transform-origin: center center;
 98             }
 99             100% {100                 transform: rotate3d(0, 1, 0, 360deg);
101                 /*transform: rotate3d(1, 0, 0, 180deg);*/
102                 transform-origin: center center;
103             }
104         }
105     </style>
106 </head>
107
108 <body>
109     <div class="container">
110         <div id="divE">
111             <figure class="front">1</figure>
112             <figure class="back">2</figure>
113             <figure class="right">3</figure>
114             <figure class="left">4</figure>
115             <figure class="top">5</figure>
116             <figure class="bottom">6</figure>
117         </div>
118     </div>
119 </body>
120 <script>
121     var a = document.getElementById("divE");
122     // alert(a);
123     a.onclick = function() {
124         a.className = "myfirst";
125     }
126     a.onmouseleave = function() {
127         a.className = a.className.replace("myfirst", " ");
128     }
129 </script>
130
131 </html>

第一,先要有六个div前后,左右,上下;在六个div外面需要一个父级容器,在父级的外部需要一个

转载于:https://www.cnblogs.com/WhiteM/p/6183580.html

CSS3之3D效果中的transform运用相关推荐

html怎么做成3d正方体,利用CSS3的3D效果制作正方体
学会用CSS3的3D效果制作一个正方体,有助于增强我们对3D场景的旋转和位移属性的理解.下面的动态图就是利用3D旋转位移,结合动画效果制作的.感兴趣的同学可以在完成正方体的制作基础上,再去探究一下添加 ...
css3制作正方体,利用CSS3的3D效果制作正方体
学会用css3的3d效果制作一个正方体,有助于增强我们对3d场景的旋转和位移属性的理解.下面的动态图就是利用3d旋转位移,结合动画效果制作的.感兴趣的同学可以在完成正方体的制作基础上,再去探究一下添加 ...
关于CSS3的3D效果样式transform属性中的rotate3d
1.介绍在css3中新加了一些3d特效,如translate3d,scale3d,rotate3d,与css3中的2d特效最大的区别就是多了个z轴,因此才有了3d效果.因为scale3d(x,y,z ...
在css中用3D效果实现图片墙,CSS3实现3D效果的图片墙_html/css_WEB-ITnose
先来看一下效果:http://1.huizit1.applinzi.com/CSS/transform_3D/img_3D.html 布局结构: CSS3中新增了translate-style和per ...
css3实现3d效果的立方体动画
纯css3动画写的立方体动画,还是蛮简单的,完整的效果如下: 首先,在html弄6个面 <div id="wrapper"><ul><li>&l ...
如何使用CSS3实现3D效果
一. 设置一个立方体非常简单首先需要在最外层的div设置perspective:800px;的查看位置视图,这里建议在1000px左右,不然可能会出现拉伸变型. 使用transform-style: ...
CSS3实现3D立体效果
CSS3实现3D效果 1. 涉及到的几个CSS3属性首先大家需要了解transform属性,主要有平移(translate),缩放(scale),拉伸(skew),旋转(rotate). 这里涉及到 ...
html如何实现立体效果,CSS3实现3D立体效果
CSS3实现3D效果 1. 涉及到的几个CSS3属性首先大家需要了解transform属性,主要有平移(translate),缩放(scale),拉伸(skew),旋转(rotate). 这里涉及到 ...
玩转CSS3的3D动画效果
效果展示基础知识 transform-style:启用 3D 模式要利用 CSS3 实现 3D 的效果,最主要的就是借助 transform-style 属性.transform-style 只有 ...
AI中的3D效果应用——凸出与斜角
AI中的3D效果应用--凸出与斜角 (写作时间:6月5日作者:陈铭军) 如何使用AI中的3D效果中的凸出与斜角做一个骰子,首先使用椭圆工具(L)画出骰子的1-6的样子,就像这样. 然后在菜单栏中点击 ...

CSS3之3D效果中的transform运用

CSS3之3D效果中的transform运用相关推荐

最新文章

热门文章