css镶嵌,CSS3 图片的镶嵌特效

CSS

语言：

CSSSCSS

确定

html,

body {

height: 100%;

overflow: hidden;

}

.container {

position: absolute;

width: 150%;

height: 170%;

margin-top: -20%;

margin-left: -25%;

background: url("/uploads/150101/sky2.jpg");

transform-style: preserve-3d;

transform-origin: 50% 50%;

perspective: 1200px;

animation: rot 30s linear infinite;

}

.box {

position: absolute;

top: 50%;

left: 50%;

margin-left: -10em;

margin-top: -10em;

width: 20em;

height: 20em;

}

.wall,

.right,

.left,

.bottom,

.top,

.back {

width: 20em;

height: 20em;

background: url("/uploads/150101/sky2.jpg");

background-size: cover;

position: absolute;

}

.wall:before,

.right:before,

.left:before,

.bottom:before,

.top:before,

.back:before {

content: "";

position: absolute;

width: 100%;

height: 100%;

background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0%, transparent 100%);

}

.right {

transform: rotateY(90deg) translateZ(10em) rotate(90deg);

}

.left {

transform: rotateY(90deg) translateZ(-10em) rotate(90deg);

}

.bottom {

transform: rotateX(90deg) translateZ(-10em);

}

.top {

transform: rotateX(90deg) translateZ(10em);

}

.back {

transform: translateZ(-10em);

}

.back:before {

background: rgba(0, 0, 0, 0.5);

}

@keyframes rot {

to {

transform: rotate(360deg);

}

css镶嵌,CSS3 图片的镶嵌特效相关推荐

JavaScript和CSS实现详情图片显示大图特效
<!doctype html> <html> <head><title>JavaScript和CSS实现详情图片显示大图特效</title> ...
html5 css3鼠标滑过效果,Hover.css纯CSS3鼠标滑过特效动画库
Hover.css是一款非常简单实用的纯CSS3鼠标滑过特效动画库.有100多种效果可以选择,包括:2D动画.背景动画.边框动画.图标动画.发光渐变.阴影.对话框.折角等100多种特效. 使用方法首 ...
html 图片的过渡效果,3个CSS3图片过渡动画特效
CSS 语言: CSSSCSS 确定 div { width: 200px; height: 200px; margin-top: 100px; margin-left: 100px; float: ...
html5图片自动翻转特效,CSS3带动态阴影效果的3D图片翻转特效
在前不久我们讲解了CSS3 3D卡片翻转技术,在这篇文章中,我们要跟进一步,在卡片3D翻转的基础上,制作卡片的动态阴影效果.最终效果是鼠标滑过图片时,卡片会3D翻转,图片的背面显示图片的标题,在图片的 ...
网页特效：用CSS3制作3D图片立方体旋转特效
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
web网页设计——体育气步枪射击主题(5页面)带图片轮播特效(HTML+CSS) ~学生网页设计作业源码
web网页设计--体育气步枪射击主题(5页面)带图片轮播特效(HTML+CSS) ~学生网页设计作业源码临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手 ...
html动画图片重叠,CSS3炫酷堆叠图片展示动画特效
这是一款效果的CSS3炫酷堆叠图片展示动画特效.该堆叠图片展示效果是将一组图片堆叠在一起,然后以各种CSS动画效果来切换最上面的一张图片.该特效将使用纯CSS3制作,它可以在所有现代浏览器和移动设备上 ...
CSS3鼠标悬停图片显示遮罩特效
transform:translateY(50px); transform:translateY(0px); 这两行代码实现了元素从下向上移动 opacity:0; opacity:0.5; 遮罩是通 ...
java 图片插件_[Java教程]10款功能强大的jQuery/CSS3图片特效插件
[Java教程]10款功能强大的jQuery/CSS3图片特效插件 0 2014-11-26 03:01:04 1.CSS3实现的底部带滚动云彩效果的网站登录页面 CSS3实现的底部带滚动云彩效果的网 ...

css镶嵌,CSS3 图片的镶嵌特效

css镶嵌,CSS3 图片的镶嵌特效相关推荐

最新文章

热门文章