transform

图形包括基本的矩形、圆形、椭圆、三角形、多边形，也包括稍微复杂一点的爱心、钻石、阴阳八卦。其中绝大部分涉及到CSS3中的border-radius，text-shadow， transform 等一些比较复杂的属性，所以需要有一点CSS3基础的最好。特别注意的是此效果不兼容IE<9的浏览器，最好用firefox，chrome等浏览器。以下案例都由本人亲自测试，希望好学您也可以一一测试一下。 1.正方形 正方形 1 #square {2 width: 100px;3 height: 100px;4 background: red;5 } 2.长方形 长方形 1 #rectangle {2 width: 200px;3 height: 100px;4 background: red;5 } 3.圆形 圆形 1 #circle {2 width: 100px;3 height: 100px;4 background: red;5 -moz-border-radius: 50px;6 -webkit-border-radius: 50px;7 border-radius: 50px;8 } 4.椭圆 椭圆 1 #oval {2 width: 200px;3 height: 100px;4 background: red;5 -moz-border-radius: 100px / 50px

问题描述 ：移动端iPhone上的1px边框看起来像2px那么粗。 问题分析 ：不同的手机有不同的像素密度，在window对象中有一个devicePixelRatio属性，它可以反应设备的像素与css中的像素比。即devicePixelRatio=物理像素/独立像素。iPhone使用的是Retine屏，“Retina”是一种显示技术，可以把更多的像素点压缩至一块屏幕里，从而达到更高的分辨率并提高屏幕显示的细腻程度。因为Retine屏的分辨率始终是普通屏幕的2倍，1px的边框在devicePixelRatio=2的Retine屏下会显示成2px，所以css设置1px的样式，实际是2px的效果。 解决方案 ： 1、用小数实现 div { border: 1px solid #dfdfdf; } @media screen and (-webkit-min-device-pixel-ratio: 2) { div { border: 0.5px solid #dfdfdf; } } @media screen and (-webkit-min-device-pixel-ratio: 3) { div { border: 0.333333px solid #dfdfdf; } } 无法兼容安卓设备和iOS8以下的设备。 2、用border-image实现 .border-image-1px

本篇文章给大家带来的内容是关于css实现3d动画特效的代码实例，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。 属性 perspective ：透距离，单位像素（值越小，透视距离越近，效果越明显）：设置父元素上 perspective-origin: 设置透视点的位置 transform-style :指定某元素的子元素是位于三维空间内，取值：flat | preserve-3d 一、写一个简单的立方体 1.一个长方体有6个面，我们写6个div，并用一个父元素包裹起来。 <div class="mofang"> <div class="box mian1">1</div> <div class="box mian2">2</div> <div class="box mian3">3</div> <div class="box mian4">4</div> <div class="box mian5">5</div> <div class="box mian6">6</div> </div> 2.给.mofang设置宽高，并给他设置视距和透视点位置，preserve-3d属性保留子元素3d转换 .mofang{ width: 100px; height: 100px; position: absolute; top: calc(50% - 50px); left:

CSS 变换 用于在空间中移动物体，而CSS 过渡 和CSS 关键帧动画 用于控制元素随时间推移的变化。 变换、过渡和关键帧动画的规范仍然在制定中。尽管如此，其中大多数特性已经在常用浏览器中实现了。 1.二维变换 CSS变换支持在页面中平移、旋转、变形和缩放元素。 从技术角度说，变换改变的是元素所在的坐标系统。 任何落在元素渲染空间内的像素都会被 畸变场 捕获，然后再把它们传输到页面上的新位置，或改变大小。元素本身还在页面上原来的位置，但它们畸变之后的“影像”已经变换了。 <div class="box"></div> .box { /* 省略 */ width: 100px; height: 100px; background-color: #eee; outline: 1px solid; transform: rotate(45deg); /* 旋转45度角 */ } 页面上元素原来的位置仍然保留了100像素×100像素的空间，但元素上所有的点都被畸变场给变换到了新位置。 旋转后的矩形不会妨碍页面其他部分的布局，就好像根本没有变换过一样。 1.1 变换原点 默认情况下，变换是以元素边框盒子的中心作为原点的。控制原点的属性叫 transform-origin 。 .box { transform-origin: 10px 10px; transform: rotate