正文
翻转样式css,反转构造样式
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
怎样用CSS实现图片翻转
以实现一张图片双面翻转为例：
方法一：
1、实现CSS样式的方法代码如下。
2、实现前端布局的方法代码如下。
3、实现图片翻转CSS样式代码如下。
方法二：
1、实现正反面效果的HTML的方法代码如下。
2、实现CSS样式的方法代码。
3、然后实现竖向翻转的方法代码如下。
相关问答
Q1: css3 翻转和旋转的区别
css3 翻转和旋转的区别如下：
概述：css3中的transform中有旋转，放缩，倾斜，平移的功能，分别对应的属性是：rotate，scale，skew，translate
1、旋转，利用rotate来实现，代码如下：
-webkit-transform:rotate(10deg); 指定浏览器内核为webkit的翻转方式
-moz-transform:rotate(10deg);指定firefox浏览器私有属性
transform:rotate(10deg); 一般浏览器翻转的角度为10弧度
2、 翻转，利用scale来实现，代码如下：
scale本来是放缩的意思，原来括弧里面（1，1）前者表示X轴，后者表示Y轴，当数字大于1时放大，大于0并小于1时缩小，负数代表翻转
水平翻转：
-webkit-transform:scale(-1，1); 水平轴为-1，代表水平翻转
-moz-transform:scale(-1，1); 水平轴为-1，代表水平翻转
transform:scale(-1，1);水平轴为-1，代表水平翻转
垂直翻转：
-webkit-transform:scale(1，-1); 垂直轴为-1，代表垂直翻转
-moz-transform:scale(1，-1); 垂直轴为-1，代表垂直翻转
transform:scale(1，-1);垂直轴为-1，代表垂直翻转
Q2: css3 如何让一个图片不断翻转
/* css3 让一个图片不断翻转示例代码 */
#gavinPlay{
/* background:color url x y repeat 图片来自百度图片，按需要更换 */
background:red url(";fm=80") center no-repeat;
/* background-size:auto auto || cover 代表以宽或高填满元素背景 */
background-size:cover;
/* 随便设置宽高值，测试 */
width:200px;
height:200px;
/* 设置默认样式，开启3d硬件加速 */
-webkit-transform:translate3d(0,0,0);
-moz-transform:translate3d(0,0,0);
transform:translate3d(0,0,0);
/* 设置动画，animation:动画名称 动画播放时长单位秒或微秒 动画播放的速度曲线linear为匀速 动画播放次数infinite为循环播放; */
-webkit-animation:play 3s linear infinite;
-moz-animation:play 3s linear infinite;
animation:play 3s linear infinite;
}
@-webkit-keyframes play{
0% {
/*
水平翻转
*/
-webkit-transform:rotateY(0deg);
/*
垂直翻转
-webkit-transform:rotateX(0deg);
顺时针旋转
-webkit-transform:rotate(0deg);
逆时针旋转
-webkit-transform:rotate(0deg);
*/
}
100% {
/* 水平翻转 */
-webkit-transform:rotateY(360deg);
/* 垂直翻转
-webkit-transform:rotateX(360deg);
顺时针旋转
-webkit-transform:rotate(360deg);
逆时针旋转
-webkit-transform:rotate(-360deg);
*/
}
}
@-moz-keyframes play{
0% {
-moz-transform:rotateY(0deg);
/*
-moz-transform:rotateX(0deg);
-moz-transform:rotate(0deg);
-moz-transform:rotate(0deg);
*/
}
100% {
-moz-transform:rotateY(360deg);
/*
-moz-transform:rotateX(360deg);
-moz-transform:rotate(360deg);
-moz-transform:rotate(-360deg);
*/
}
}
@keyframes play{
0% {
transform:rotateY(0deg);
/*
transform:rotateX(0deg);
transform:rotate(0deg);
transform:rotate(0deg);
*/
}
100% {
transform:rotateY(360deg);
/*
transform:rotateX(360deg);
transform:rotate(360deg);
transform:rotate(-360deg);
*/
}
}
!-- html 布局代码 --
div id="gavinPlay"/div
Q3: CSS中如何让照片实现翻转和模糊？
filter:FlipH(); 水平翻转对象内容！
filter:FlipV(); 垂直翻转对象内容。
filter:blur();模糊效果!
代码加在HTML容器Css属性设置里！
所加载的容器要有有效的高和宽！！
filter只有IE浏览器支持的！
如果不会设置HTML的CSS，那就麻烦了！
