In my site there are a few thumbnail when u hover, there will be text coming out.
In android it is perfect, when u touch the thumbnail, the text will appear before the thumbnail go into the slideshow.
But in IOS, the text will not appear and straight away go to the slideshow.
The thumbnails
This is my css
.text {
background-color: rgba(183, 191, 183, 0.65);
color: white;
font-size: 16px;
width:100%;
height:100%;
padding-top:40%;
padding-left:2%;
cursor: pointer;
.middle {
transition: .5s ease;
-webkit-transition: .5s ease ;
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
-webkit-transform: translate(-50%,-50%);
}
Related
When I scale an element on Safari Mobile / iOS, the text seems blurry.
I tested it on iOS7, iOS8, iOS9 even iOS10.
.sticky-note {
position: fixed;
bottom: 1em;
right: 1em;
padding: 0.5em 1em;
background: tomato;
color: white;
-webkit-transform: scale(1.5);
transform: scale(1.5);
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}
<div class="sticky-note">
This text is blurry on iOS
</div>
The blurry effect came from the combination of position: fixed and transform: scale().
The position: fixed seems to enable the GPU acceleration, which is faster, but could reduce rendering quality of fonts.
.sticky-container {
position: fixed;
bottom: 1em;
right: 1em;
}
.note {
padding: 0.5em 1em;
background: tomato;
color: white;
-webkit-transform: scale(1.5);
transform: scale(1.5);
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}
<div class="sticky-container">
<div class="note">
This text is not blurry \o/
</div>
</div>
I've read quite a few SO posts on iOS scrolling issues, I'm aware a few people have had issues. I've tried numerous fixes but I'm absolutely stuck on this!
I'm making a one page website. The layout is a 3D cube, using CSS3 transforms and animations. In a nutshell, the problem is the content on the front face will scroll, the content on other faces wont. As far as I can tell this breaks when I rotate the faces to create the cube. The content in the right face will not scroll, it acts like overflow: hidden;
I don't know how useful this will be, but I've created an Fiddle. It uses on part of the code (the main idea) and the whole lot is quite a bit to post. Has anyone tried to get overflow content to scroll on iOS inside a rotated/transformed parent element before?
I'm going crazy, please help! Thanks!
Here's my SASS from the Fiddle;
body {
margin: 0;
padding: 0;
}
.cube-container {
width: 100%;
perspective: 2000px;
-webkit-perspective: 2000px;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0,0,0);
.cube-shell {
position: relative;
z-index: 1;
margin: 0 auto;
transform-style: preserve-3d;
transform: rotateY( 0deg ) translateX( 0px );
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0,0,0);
animation-duration: 1s;
animation-direction: normal;
animation-fill-mode: forwards;
animation-timing-function: ease;
&.rotate-center-to-right {
animation-name: center-to-right;
}
}
.face {
background-position: 50% 50%;
background-size: cover;
padding: 0;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0,0,0);
position: relative;
z-index: 10;
text-align: center;
width: 100%;
// When we are in "cube mode"
&.cube-compatible {
overflow: hidden;
position: absolute;
// z-index: 5;
top: 0;
left: 0;
right: 0;
// z-index: 0;
}
> .face-inner {
overflow: scroll;
// -webkit-overflow-scrolling: touch;
}
}
.face-inner {
max-width: 1320px;
max-height: 100%;
height: 100%;
width: 100%;
padding: 40px 60px;
margin: auto;
// display: inline-block;
display: block;
vertical-align: middle;
position: relative;
z-index: 30;
box-sizing: border-box;
-webkit-box-sizing: border-box;
}
// Center face
.face-center {
position: relative;
text-align: center;
background: #ccc;
}
// Right face
.face-right {
transform-origin: center right;
background: #efefef;
}
.scroll-content {
overflow: scroll;
-webkit-overflow-scrolling: touch;
height: 100%;
}
.scrollable {
-webkit-backface-visibility: hidden;
}
}
#keyframes center-to-right {
0% {
transform: rotateY( 0deg ) scale3d( 1, 1, 1 );
}
// 15% {
// transform: rotateY( 0deg ) scale3d( 0.90, 0.90, 0.90 ) translateY( 50px );
// }
// 75% {
// transform: rotateY( -90deg ) scale3d( 0.90, 0.90, 0.90 ) translateY( 50px );
// }
100% {
transform: rotateY( -90deg ) scale3d( 1, 1, 1 );
}
}
https://jsfiddle.net/fkb241ys/14/
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
i'm creating my first web site and it's going great, looks good, and works properly. The problem i have is that i just uploaded the files to the web hosting to see how is it looking across different devices, looks great on my Smart TV, on my Android phone, on the MacBook, BUT on the iPhone and the iPad everything looks bad.
The slider is no longer overflowing, the widht is not working, even the menu buton is gone and the nav is always showing, please i need some help with this, is there some code to add so this can work on IOs movile devices?
I been looking the internet for hours trying to find the solution, i found something that includes this code:
-webkit-appearance: none;
But nothing happens everything looks bad.Thanks in advance.
You are using CSS properties that need to be prefixed in order to work in -webkit browsers, even in newer versions, such as display:flex, justify-content, transition, flex-direction,...
The practical solution is to write normal (up to date) CSS and than run it through a tool that will add the necessary prefixes for making it compatible with most browsers. It's called auto-prefixing and you can read more about it here. Good auto-prefixing tools are connected to caniuse and can be configured for various specific needs (prefix for last three versions from each browser, or prefix for all browsers with an above X usage percentage, or combinations between the two).
Here are the auto-prefixed versions of your project's CSS files. Replace assets/css/header.css with:
*{
margin: 0;
padding: 0;
-webkit-appearance: none;
}
header{
z-index: 1000;
position: fixed;
width: 100%;
font-family: "roboto";
background-color: rgba(0, 0, 0, 0.7);
}
#btn-menu{
display: none;
}
header label{
display: none;
height: 30px;
width: 30px;
padding: 10px;
}
header label:hover{
cursor: pointer;
background-color: rgba(0, 0, 0, 0.8);
}
.menu ul{
margin: 0;
list-style: none;
padding: 0;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: end;
-webkit-justify-content: flex-end;
-ms-flex-pack: end;
justify-content: flex-end;
}
.menu li:hover{
background-color: rgba(0, 0, 0, 0.8);
}
.menu li a{
display: block;
padding: 20px 20px 10px 20px;
color: #fff;
text-decoration: none;
}
#media (max-width: 768px) {
header label {
height: 60px;
width: 60px;
padding: 10px;
display: block;
}
.menu{
position: absolute;
background-color: rgba(0, 0, 0, 0.7);
width: 30%;
margin-left: -30%;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.menu ul{
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
#btn-menu:checked ~ .menu{
margin: 0;
}
}
And assets/css/body.css with:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-appearance: none;
}
body{
z-index: 500;
position: relative;
}
#logo{
padding-top: 50px;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#logo-image{
width: 100%;
max-width: 650px;
}
#containerslider{
padding-top: 59px;
position: relative;
margin: auto;
width: 100%;
max-width: 1920px;
overflow: hidden;
}
.slider{
text-align: center;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
width: 400%;
}
.slider .section{
display: block;
height:100%;
width: 100%;
}
.slider img{
display: block;
height: 100%;
width: 100%;
}
.btn-prev, .btn-next{
width: 50px;
height: 50px;
color: white;
font-family: sans-serif; "roboto";
background: rgba(0, 0, 0, 0.5);
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
line-height: 50px;
font-size: 22px;
text-align: center;
border-radius: 50%;
cursor: pointer;
}
.btn-prev{
left: 10px;
}
.btn-next{
right: 10px;
}
.btn-prev:hover, .btn-next:hover{
background: rgba(0, 0, 0, 0.9);
}
.space{
height: 2000px;
}
For those of you who have ever used the eBay app on a tablet device, you may have noticed that when you touch a product, the product view switches from a standard grid view like the following:
To a view like the following where all the products are moved to a left nav and the details about the touched product are put in the right area:
The thing that's really cool is the animation that transforms the view from one to the other.
Specifically, the product images shrink down a bit and then slide over to wherever they belong in the left nav. (This is much easier to see with the actual app than for me to explain.)
Anyway, I really like the animation, and I'd love to be able to create the same effect on a website using HTML/CSS, but I've had no luck.
I tried placing a bunch of divs next to each other on the screen and (with the click of a button) using CSS3 transitions to shrink the width of the containing div, but all that resulted in was the divs making a sudden jump from one location to another without any sort of fluid animation or movement, which I would ideally like.
If what I'm looking to achieve is impossible with just HTML/CSS, then that's fine, but I'd like to defer the question to those much wiser than me before I give you.
If anyone knows how to do this (or can conclusively tell me that it's impossible), I'd be very appreciative.
Thank you.
It is not difficult, just a little boring to do all the details
for this html
<div class="container">
<div id="elem1"></div>
<div id="elem2"></div>
<div id="elem3"></div>
<div id="elem4"></div>
<div id="elem5"></div>
<div id="elem6"></div>
<div id="elem7"></div>
<div id="elem8"></div>
<div id="elem9"></div>
</div>
I have prepared this CSS
.container {
position: relative;
width: 300px;
height: 300px;
border: 1px solid green;
}
.container div {
position: absolute;
width: 100px;
height: 100px;
border: 1px solid red;
background-color: lavender;
}
#elem5 {
left: 100px;
top: 100px;
}
.container:hover div {
-webkit-animation-duration: 3s;
-webkit-animation-direction: normal;
-webkit-animation-fill-mode: forwards;
}
#elem5 {
left: 100px;
top: 100px;
}
.container:hover #elem5 {
-webkit-animation-name: an5;
}
#-webkit-keyframes an5 {
0% {-webkit-transform: scale(1);}
50% {-webkit-transform: scale(0.33);}
100% {-webkit-transform: translateX(-133px) scale(0.33);}
}
#elem9 {
left: 200px;
top: 200px;
}
.container:hover #elem9 {
-webkit-animation-name: an9;
}
#-webkit-keyframes an9 {
0% {-webkit-transform: scale(1);}
50% {-webkit-transform: scale(0.33);}
100% {-webkit-transform: translateX(-233px) translateY(33px) scale(0.33);}
}
I have set an array of 9 elements, that would fit an 3x3 grid.
And I have positioned the 5th and 9th of them where they should be, and created an animation to move them to the list position.
(Only webkit transforms)
There is left to create animations for the other 7 elements, and to elaborate the animations (with more keyframes)
jfiddle
As per your comment, an alternate way to do it.
The demo is prepared for a grid of 3 columns. Then, the key is to have only the first child of every 3 in flow; the remaining 2 are out of flow since they are positioned absolute. This allows us to create generic rules based in nth-child for the positioning of the elements.
Once you have the animations set, this style adapts to any number of elements (and you have only to set as many animations as columns has your design)
CSS
.container {
height: 500px;
}
.child {
width: 100px;
height: 100px;
font-size: 40px;
text-align: center;
line-height: 90px;
box-shadow: inset 0px 0px 2px black;
}
.child:nth-child(3n+1) {
background-color: lightblue;
}
.child:nth-child(3n+2) {
position: absolute;
-webkit-transform: translate3d(100px, -100px, 0px);
background-color: lightgreen;
}
.child:nth-child(3n) {
position: absolute;
-webkit-transform: translate3d(200px, -100px, 0px);
background-color: lightyellow;
}
.container:hover .child {
-webkit-animation-fill-mode: forwards;
-webkit-animation-duration: 8s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
width: 300px;
}
.container:hover .child:nth-child(3n+1) {
-webkit-animation-name: ani1;
}
.container:hover .child:nth-child(3n+2) {
-webkit-animation-name: ani2;
}
.container:hover .child:nth-child(3n+3) {
-webkit-animation-name: ani3;
}
#-webkit-keyframes ani1 {
0% {width: 100px; -webkit-transform: scale(1);}
50% {width: 300px; -webkit-transform: translate3d(-70px, -20px, 0px) scale(0.33);}
100% {width: 300px; -webkit-transform: translate3d(-100px, -40px, 0px) scale(0.33);}
}
#-webkit-keyframes ani2 {
0% {width: 100px;-webkit-transform: translate3d(100px, -100px, 0px) scale(1);}
50% {width: 300px; -webkit-transform: translate3d(0px, -90px, 0px) scale(0.33);}
100% {width: 300px; -webkit-transform: translate3d(-100px, -106px, 0px) scale(0.33);}
}
#-webkit-keyframes ani3 {
0% {width: 100px; -webkit-transform: translate3d(200px, -100px, 0px) scale(1);}
50% {width: 300px; -webkit-transform: translate3d(80px, -100px, 0px) scale(0.33) rotate(180deg);}
100% {width: 300px; -webkit-transform: translate3d(-100px, -73px, 0px) scale(0.33) rotate(359.99deg);}
}
Reusable fiddle
(Only for webkit. Just for fun, added some rotation)
On an iPad you can do this with the CSS -webkit-transform property.
CSS
.menu-open {
-webkit-transform: translate3d(260px, 0, 0);
}
#main {
-webkit-transition: -webkit-transform 150ms ease-in;
transition: -webkit-transform 150ms ease-in;
overflow: visible;
width: 100%;
margin: 0;
padding: 0;
outline: 0;
border: 0;
top: 0;
left: 0;
position: absolute;
color: #333;
background-color: white;
display: block;
min-height: 100%;
}
#menu
{
position: absolute;
width: 100%;
position: absolute;
width: 259px;
top: 0;
left: 0;
background: white;
margin: auto;
min-height: 100%;
height:auto !important;
height:100%;
overflow: hidden !important;
display:block;
}
HTML
<div id="menu" style="display:none; background-color: #cccccc;">
<div>Text</div>
</div>
<div id="main">
<input type="button" id="menuToggle" value="Toggle" />
</div>
JS
function showMenu() {
$("#menu").show(0);
$("#main").addClass('menu-open');
}
function hideMenu() {
if ($("#main").hasClass('menu-open')) {
$("#main").removeClass('menu-open');
setTimeout(function () { $("#menu").hide(); }, 500);
}
}
$(document).ready(function () {
var body = $("#main"),
menuToggle = $('#menuToggle'),
menu = $("#menu");
menuToggle.bind('click', function (ev) {
ev.preventDefault();
if (body.hasClass('menu-open')) {
hideMenu();
} else {
showMenu();
}
});
});
See this JsFiddle for an example. Hope I understood you correctly (no iPad here at the moment).
I'm trying out some webkit transitions on a site and have come across a problem on iOS devices. I have six images being given a random rotation every second. The transition works fine for five out of the six images but for some reason when using the iPad or the iPhone the sixth image disappears during the transition.
You can view the example HERE.
CSS:
.b1_needle {
width: 100%;
height: 100%;
z-index: 1;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: -webkit-transform 0.5s ease-out;
transition: transform 0.15s linear;
}
.b2_needle {
width: 100%;
height: 100%;
z-index: 1;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: -webkit-transform 0.5s ease-out;
transition: transform 0.15s linear;
}
.m1_needle {
width: 100%;
height: 100%;
z-index: 1;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: -webkit-transform 0.5s ease-out;
transition: transform 0.15s linear;
}
.m2_needle {
width: 100%;
height: 100%;
z-index: 1;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: -webkit-transform 0.5s ease-out;
transition: transform 0.15s linear;
}
.s1_needle {
width: 100%;
height: 100%;
z-index: 1;
-webkit-transform: rotate(0deg);
position: relative;
top: 6px;
transform: rotate(0deg);
-webkit-transition: -webkit-transform 0.5s ease-out;
transition: transform 0.15s linear;
}
.s2_needle {
width: 100%;
height: 100%;
z-index: 1;
-webkit-transform: rotate(0deg);
position: relative;
top: 7px;
transform: rotate(0deg);
-webkit-transition: -webkit-transform 0.5s ease-out;
transition: transform 0.15s linear;
}
Javascript:
var ranNum;
function randomFromTo(from, to){
ranNum = Math.floor(Math.random() * (to - from + 1) + from);
ranNum = ranNum + "deg";
return ranNum;
}
setInterval(function newNum(){
document.getElementById("needle_b1").style.webkitTransform = "rotate("+randomFromTo(0,293)+")";
document.getElementById("needle_b2").style.webkitTransform = "rotate("+randomFromTo(0,285)+")";
document.getElementById("needle_m1").style.webkitTransform = "rotate("+randomFromTo(0,314)+")";
document.getElementById("needle_m2").style.webkitTransform = "rotate("+randomFromTo(0,223)+")";
document.getElementById("needle_s1").style.webkitTransform = "rotate("+randomFromTo(0,130)+")";
document.getElementById("needle_s2").style.webkitTransform = "rotate("+randomFromTo(0,95)+")";
}, 2000);
I originally thought it was a memory issue but removing the transition from all but that one image doesn't make a difference. Any ideas for why this is would be happening?
Your z-index values are starting from -2. In my experience Webkit doesn't mind that you use negative values, but it seems Mobile Webkit does.
If you put a border on .b1_needle you will notice it appears below .bigOne, despite having a z-index of 100.
Start your z-indexes from 0 and then go up.
Copy and paste this CSS to verify:
#media screen and (orientation:portrait)
{
.container {
background: url(../images/back_port.jpg);
background-position: top left;
background-repeat: no-repeat;
width: 768px;
height: 1004px;
position: absolute;
top: 0px;
left: 0px;
z-index: 0;
}
.bigOne {
position: absolute;
right: 29px;
top: 21px;
background-color: #000;
border: 15px solid #999;
height: 350px;
-webkit-border-radius: 190px;
width: 350px;
z-index: 1;
-webkit-box-shadow: 0 3px 4px #000;
}
.bigTwo {
position: absolute;
right: 29px;
bottom: 21px;
background-color: #000;
border: 15px solid #999;
height: 350px;
-webkit-border-radius: 190px;
width: 350px;
z-index: 1;
-webkit-box-shadow: 0 3px 4px #000;
}
.midOne {
position: absolute;
right: 502px;
top: 243px;
background-color: #000;
border: 15px solid #999;
height: 218px;
-webkit-border-radius: 124px;
width: 218px;
z-index: 1;
-webkit-box-shadow: inset 0 3px 4px #000;
}
.midTwo {
position: absolute;
right: 502px;
bottom: 243px;
background-color: #000;
border: 15px solid #999;
height: 218px;
-webkit-border-radius: 124px;
width: 218px;
z-index: 1;
-webkit-box-shadow: inset 0 3px 4px #000;
}
.smallOne {
position: absolute;
top: 50px;
right: 437px;
background-color: #000;
border: 10px solid #999;
height: 128px;
-webkit-border-radius: 74px;
width: 128px;
z-index: 1;
}
.smallTwo {
position: absolute;
bottom: 50px;
right: 437px;
background-color: #000;
border: 10px solid #999;
height: 128px;
-webkit-border-radius: 74px;
width: 128px;
z-index: 1;
}
.statusBox {
position: absolute;
left: 273px;
top: 373px;
background-color: #000;
border: 10px solid #999;
border-radius: 8px;
width: 150px;
height: 237px;
z-index: 1;
-webkit-box-shadow: 0 3px 4px #000;
}
.iconBox {
position: absolute;
left: 465px;
top: 463px;
width: 264px;
height: 58px;
background-color: #000;
border: 10px solid #999;
border-radius: 8px;
z-index: 1;
-webkit-box-shadow: 0 3px 4px #000;
}
}
#media screen and (orientation:landscape)
{
.container {
background: url(../images/back_land.jpg);
background-position: top left;
background-repeat: no-repeat;
width: 1024px;
height: 748px;
position: absolute;
top: 0px;
left: 0px;
z-index: 0;
}
.bigOne {
position: absolute;
left: 21px;
top: 29px;
background-color: #000;
border: 15px solid #999;
height: 350px;
-webkit-border-radius: 190px;
width: 350px;
z-index: 1;
-webkit-box-shadow: 0 3px 4px #000;
}
.bigTwo {
position: absolute;
right: 21px;
top: 29px;
background-color: #000;
border: 15px solid #999;
height: 350px;
-webkit-border-radius: 190px;
width: 350px;
z-index: 1;
-webkit-box-shadow: 0 3px 4px #000;
}
.midOne {
position: absolute;
left: 243px;
top: 482px;
background-color: #000;
border: 15px solid #999;
height: 218px;
-webkit-border-radius: 124px;
width: 218px;
z-index: 1;
-webkit-box-shadow: inset 0 3px 4px #000;
}
.midTwo {
position: absolute;
right: 243px;
top: 482px;
background-color: #000;
border: 15px solid #999;
height: 218px;
-webkit-border-radius: 124px;
width: 218px;
z-index: 1;
-webkit-box-shadow: inset 0 3px 4px #000;
}
.smallOne {
position: absolute;
left: 50px;
top: 437px;
background-color: #000;
border: 10px solid #999;
height: 128px;
-webkit-border-radius: 74px;
width: 128px;
z-index: 1;
}
.smallTwo {
position: absolute;
right: 50px;
top: 437px;
background-color: #000;
border: 10px solid #999;
height: 128px;
-webkit-border-radius: 74px;
width: 128px;
z-index: 1;
}
.statusBox {
position: absolute;
left: 428px;
top: 99px;
background-color: #000;
border: 10px solid #999;
-webkit-border-radius: 8px;
width: 150px;
height: 237px;
z-index: 1;
-webkit-box-shadow: 0 3px 4px #000;
}
.iconBox {
position: absolute;
left: 370px;
top: 380px;
width: 264px;
height: 58px;
background-color: #000;
border: 10px solid #999;
border-radius: 8px;
z-index: 1;
-webkit-box-shadow: 0 3px 4px #000;
}
}
.statusData{
width: 126px;
height: 100%;
margin-left: auto;
margin-right: auto;
}
.statusLogo{
background: url(../images/mccaLogo.png);
height: 87px;
width: 100%;
}
.digitalTxt{
font-family: 'Digital7Mono';
font-size: 32px;
color: #fff;
width: auto;
margin-left: auto;
margin-right: auto;
margin-top: 3px;
}
.statusDate{
height: 48px;
width: 100%;
border-top: 2px #999 solid;
}
.statusTime{
height: 48px;
width: 100%;
border-top: 2px #999 solid;
}
.statusLoc{
height: 48px;
width: 100%;
border-top: 2px #999 solid;
}
.b1_notch {
width: 100%;
height: 100%;
background: url(../images/b1_back.png);
background-position: center;
background-repeat: no-repeat;
z-index: 1;
}
.b1_needle {
width: 100%;
height: 100%;
z-index: 2;
-webkit-transform: rotate3d(0, 0, 0, 0deg);
transform: rotate3d(0, 0, 0, 0deg);
-webkit-transition: all 0.5s linear;
transition: all 0.5s linear;
}
.b2_notch {
width: 100%;
height: 100%;
background: url(../images/b2_back.png);
background-position: center;
background-repeat: no-repeat;
z-index: 1;
}
.b2_needle {
width: 100%;
height: 100%;
z-index: 2;
-webkit-transform: rotate3d(0, 0, 0, 0deg);
transform: rotate3d(0, 0, 0, 0deg);
-webkit-transition: -webkit-transform 0.5s linear;
transition: transform 0.5s linear;
}
.m1_notch {
width: 100%;
height: 100%;
background: url(../images/m1_back.png);
background-position: center;
background-repeat: no-repeat;
z-index: 1;
}
.m1_needle {
width: 100%;
height: 100%;
z-index: 2;
-webkit-transform: rotate3d(0, 0, 0, 0deg);
transform: rotate3d(0, 0, 0, 0deg);
-webkit-transition: -webkit-transform 0.5s linear;
transition: transform 0.5s linear;
}
.m2_notch {
width: 100%;
height: 100%;
background: url(../images/m2_back.png);
background-position: center;
background-repeat: no-repeat;
z-index: 1;
}
.m2_needle {
width: 100%;
height: 100%;
z-index: 2;
-webkit-transform: rotate3d(0, 0, 0, 0deg);
transform: rotate3d(0, 0, 0, 0deg);
-webkit-transition: -webkit-transform 0.5s linear;
transition: transform 0.5s linear;
}
.s1_notch {
width: 100%;
height: 100%;
background: url(../images/s1_back.png);
background-position: center;
background-repeat: no-repeat;
z-index: 1;
}
.s1_needle {
width: 100%;
height: 100%;
z-index: 1;
position: relative;
top: 6px;
-webkit-transform: rotate3d(0, 0, 0, 0deg);
transform: rotate3d(0, 0, 0, 0deg);
-webkit-transition: -webkit-transform 0.5s linear;
transition: transform 0.5s linear;
}
.s2_notch {
width: 100%;
height: 100%;
background: url(../images/s2_back.png);
background-position: center;
background-repeat: no-repeat;
z-index: 1;
}
.s2_needle {
width: 100%;
height: 100%;
z-index: 2;
position: relative;
top: 7px;
-webkit-transform: rotate3d(0, 0, 0, 0deg);
transform: rotate3d(0, 0, 0, 0deg);
-webkit-transition: -webkit-transform 0.5s linear;
transition: transform 0.5s linear;
}