css3旋转 | 易学教程

css3属性transform-origin属性讲解

阅读更多关于 css3属性transform-origin属性讲解

transform是CSS3里的变换属性，常用的有translate（平移）、rotate（旋转）、skew(倾斜)、scale(缩放)方法。而transform-origin并不是transform的属性值，其具有独立的语法，但值得注意的是，transform-origin必须配合transform来使用，这个从名字也可以看得出来，就是给transform设置的各种动作设置一个参考点。默认情况下，元素的动作参考点为元素盒子的中心。transform可以设置九个位置的值，水平方向有left | center | right 三个值，垂直方向也有三个，分别是 top | center |bottom ，故一共有九个。语法： transform-origin：[ <percentage> | <length> | left | center① | right ] [ <percentage> | <length> | top | center② | bottom ]? 默认值：50% 50%，效果等同于center center 适用于：所有块级元素及某些内联元素取值： <percentage>：用百分比指定坐标值。可以为负值。 <length>：用长度值指定坐标值。可以为负值。 left：指定原点的横坐标为left center①：指定原点的横坐标为center right

CSS3 Transform的perspective属性

阅读更多关于 CSS3 Transform的perspective属性

以下两行语句有什么区别？ Css <div id="animateTest" style="-webkit-transform: perspective(400px) rotateY(40deg);"> Css <div id="animateTest" style="-webkit-transform: rotateY(40deg) perspective(400px);"> 如果大家不清楚，请听我娓娓道来。 CCS3中的Transform是设置界面样式和动画的一大利器。而且在Chrome和FF中还支持3D变换。IE9不支持，IE10支持。只要是3D场景都会涉及视角问题和透视的问题。在Transform中的设置方法比较简单：只能选择透视方式，也就是近大远小的显示方式。镜头方向只能是平行Z轴向屏幕内，也就是从屏幕正前方向里看。可以调整镜头与平面位置： a) perspective属性设置镜头到元素平面的距离。所有元素都是放置在z=0的平面上。比如perspective(300px)表示，镜头距离元素表面的位置是300像素。 b) perspective-origin属性规定了镜头在平面上的位置。默认是放在元素的中心。下面用一个正方体（或者说骰子）向大家演示视角不同视角（perspective 以及）的差别。镜头距离z=0平面的不同距离的效果。镜头在z坐标固定时

CSS3实现漂亮的卡片翻转效果

阅读更多关于 CSS3实现漂亮的卡片翻转效果

先贴效果图（实际效果比gif图流畅1000倍，放心使用）：主要利用的CSS3的 perspective 结合 transform:ratateY() 属性完成。当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。需要注意的是：perspective 属性只影响 3D 转换元素。这个属性现在在火狐谷歌safari上都得到了较好的支持，W3C.cn上关于该属性的说明还未及时更新。实现思路就是将两个要展示的div利用定位重叠在一起，其中一个首先围绕Y轴旋转一定角度，还要加上一个关键属性 backface-visibility:hidden (该属性定义当元素不面向屏幕时是否可见）。如果不加上这个属性的话，那么就会始终只能看到一张卡片了，失败的效果如下：下面就贴完整的代码： <!DOCTYPE html> < html > < head > < meta charset = "utf-8" > < meta http-equiv = "Content-Type" content = "text/html" > < meta name = "viewport" content = "width=device-width, initial-scale=1,user-scalable=no" > < meta http-equiv = "X-UA

CSS3变形之Transform-style和Perspective等属性

阅读更多关于 CSS3变形之Transform-style和Perspective等属性

transform-style属性 transform-style属性是3D空间一个重要属性，指定嵌套元素如何在3D空间中呈现，它主要有两个属性值：flat和preserve-3d。语法： transform-style : flat | preserve-3d 其中flat值为默认值，表示所有子元素在2D平面呈现。preserve-3d表示所有子元素在3D空间中呈现。 transform-style属性需要设置在父元素中，并且高于任何嵌套的变形元素。有一点需要特别提醒，如果你的元素设置了transform-style值为preserve-3d，就不能为了防止子元素溢出容器而设置overflow值为hidden，如果设置了overflow:hidden同样可以迫使子元素出现在同一平面（和元素设置了transform-style为flat一样的效果）。 perspective属性 perspective属性对于3D变形来说至关重要。该属性会设置查看者的位置，并将可视内容映射到一个视锥上，继而投到一个2D视平面上。如果不指定透视，则Z轴空间中的所有点将平铺到同一个2D视平面中，并且变换结果中将不存在景深概念。上面的描述可能让人难以理解一些，其实对于perspective属性，我们可以简单的理解为视距，用来设置用户和元素3D空间Z平面之间的距离。而其效应由他的值来决定，值越小

css3——3D动画、transform-style：preserve-3d、transform：perspective()、perspective-origin

阅读更多关于 css3——3D动画、transform-style：preserve-3d、transform：perspective()、perspective-origin

1. transform-style：preserve-3d，该属性设置在父级元素中，它的子级元素具有3d效果注意：设置了该属性，就不能防止子级元素溢出，即不能设置overf：hidden属性；如果设置了overflow：hidden，那么transform-style：preserve-3d就无效。 2. transform：perspective；景深，观察者到物体的距离；单位：px，比如：transform：perspective(500px); 英语：perspective：透镜，望远镜;观点，看法;远景，景色;洞察力（1）该属性设置在父级元素中，对于子级元素而言，都只有一个公共的视角比如：该例子中，父级设置3d属性，设置景深；三个子级元素的旋转角度都是 60度，但是视觉上却不一样，因为观察者的视角是某个特定位置。该视角下去看三个子级， <style> .wrapper{ position: absolute; top: 100px; left: 100px; width: 100px; height: 300px; border: 1px solid black; transform-style: preserve-3d; transform: perspective(500px); } .wrapper div:nth-of-type(1){ width:

css3 动画

阅读更多关于 css3 动画

<img src="" /> 添加css img{ width:400px;height:auto; animation: heart 0.5s infinite; } /*animation:动画名称消耗时间运动曲线开始时间播放次数是否添加反方向*/ 1.变化大小 @keyframes heart {　　　　0%{transform:scale(1);} 　　50%{transform:scale(1.2);} 　　100%{transform:scale(1);} } 2.移动/颜色变化 @keyframes move { 　　from{left:0;background:red;} 　　to{left:1000px;background-color:yellow;} } 3.旋转 @keyframes rotate{ 　　from{transform:rotate(0deg);} 　　to{transform:rotate(360deg);} } 来源： https://www.cnblogs.com/Tianjieqiangzhelingfeng/p/11782360.html

css3 animate转圈360旋转

阅读更多关于 css3 animate转圈360旋转

.logo{ width:20px; height: 20px; background: red; -webkit-animation:haha1 .8s linear infinite; 　　animation:haha1 .8s linear infinite; } @-webkit-keyframes haha1{ 0%{-webkit-transform:rotate(0deg);} 25%{-webkit-transform:rotate(90deg);} 50%{-webkit-transform:rotate(180deg);} 75%{-webkit-transform:rotate(270deg);} 100%{-webkit-transform:rotate(360deg);} } 或 .logo{ width:20px; height: 20px; background: red; -webkit-animation:haha1 .8s linear infinite; 　　animation:haha1 .8s linear infinite; } @-webkit-keyframes haha1{ from{transform:rotate(0)} to{transform:rotate(360deg)} } 来源： https://www.cnblogs

CSS3 滤镜

阅读更多关于 CSS3 滤镜

了解摄影活着美图秀秀之类美图软件的同学对滤镜肯定不陌生，CSS3对各种滤镜效果有了支持，可以做出很多好玩儿效果，走马观花了解一下 filter: function(param); 很很多CSS3属性一样，监狱支持情况需要使用浏览器前缀，CSS滤镜支持的方法有 grayscale 灰度 sepia 褐色 saturate 饱和度 hue-rotate 色相旋转 invert 反色 opacity 透明度 brightness 亮度 contrast 对比度 blur 模糊 drop-shadow 阴影拿图片做例子，看看效果 ԭͼ -webkit-filter:none; 以下效果都不是截图，Chrome上看 -webkit-filter:blur(10px); -webkit-filter:grayscale(0.5); -webkit-filter:sepia(0.5); -webkit-filter:brightness(3); -webkit-filter:hue-rotate(180deg); -webkit-filter:invert(1); -webkit-filter:opacity(0.5); -webkit-filter:saturate(5); -webkit-filter:contrast(0.5); -webkit-filter:drop-shadow

CSS3动画效果transform

阅读更多关于 CSS3动画效果transform

1.transform浏览器支持情况也就是说目前不考虑老浏览器的话是不用加前缀的，感谢菜鸟教程：https://www.runoob.com/cssref/css3-pr-transform.html transform默认值none;就是不转换，不继承，js中对其更改示例：object.style.transform="rotate(7deg)" 2.transform能干啥？ transform属性让元素进行2D或3D转换。可以将元素：旋转，缩放，移动，倾斜等。 transform: none|transform-functions; none是默认的，就是不进行转换，好理解。transform-functions有哪些？如下表： transform-functions的值描述测试 matrix( n , n , n , n , n , n ) 定义 2D 转换，使用六个值的矩阵。测试 matrix3d( n , n , n , n , n , n , n , n , n , n , n , n , n , n , n , n ) 定义 3D 转换，使用 16 个值的 4x4 矩阵。 translate( x , y ) 定义 2D 转换。测试 translate3d( x , y , z ) 定义 3D 转换。 translateX( x ) 定义转换，只是用 X

CSS3景深-perspective

阅读更多关于 CSS3景深-perspective

3D视图正方体： 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>CSS3景深-perspective</title> 6 </head> 7 <style> 8 #div1{ 9 position: relative; 10 width: 500px; 11 height: 500px; 12 perspective: 1000px; /* 景深面的 (宽+高)*2 */ 13 background-color: #123456; 14 } 15 #div1 ul{ 16 transform-origin: 50% 50%; /* 旋转中心 */ 17 position: absolute; 18 left: 50%; 19 top: 50%; 20 width: 250px; 21 height: 250px; 22 transform-style: preserve-3d; /* 设置3D属性让子元素三维空间呈现 */ 23 list-style: none; 24 margin: -125px 0 0 -125px; 25 padding: 0; 26 font-size: 120px; 27 animation: move 6s linear infinite

订阅 css3旋转